.ap-message-box,
.ap-popup-parent--hidden {
    overflow: hidden
}

.ap-button,
.ap-input__inner {
    -webkit-appearance: none;
    outline: 0
}

.v-modal-enter {
    animation: v-modal-in .2s ease
}

.v-modal-leave {
    animation: v-modal-out .2s ease forwards
}

@keyframes v-modal-in {
    0% {
        opacity: 0
    }
}

@keyframes v-modal-out {
    to {
        opacity: 0
    }
}

.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000
}

.ap-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px
}

.ap-button+.ap-button {
    margin-left: 10px
}

.ap-button:focus,
.ap-button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff
}

.ap-button:active {
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: 0
}

.ap-button::-moz-focus-inner {
    border: 0
}

.ap-button [class*=ap-icon-]+span {
    margin-left: 5px
}

.ap-button.is-plain:focus,
.ap-button.is-plain:hover {
    background: #fff;
    border-color: #409eff;
    color: #409eff
}

.ap-button.is-active,
.ap-button.is-plain:active {
    color: #3a8ee6;
    border-color: #3a8ee6
}

.ap-button.is-plain:active {
    background: #fff;
    outline: 0
}

.ap-button.is-disabled,
.ap-button.is-disabled:focus,
.ap-button.is-disabled:hover {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5
}

.ap-button.is-disabled.ap-button--text {
    background-color: initial
}

.ap-button.is-disabled.is-plain,
.ap-button.is-disabled.is-plain:focus,
.ap-button.is-disabled.is-plain:hover {
    background-color: #fff;
    border-color: #ebeef5;
    color: #c0c4cc
}

.ap-button.is-loading {
    position: relative;
    pointer-events: none
}

.ap-button.is-loading:before {
    pointer-events: none;
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: inherit;
    background-color: hsla(0, 0%, 100%, .35)
}

.ap-button.is-round {
    border-radius: 20px;
    padding: 12px 23px
}

.ap-button.is-circle {
    border-radius: 50%;
    padding: 12px
}

.ap-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff
}

.ap-button--primary:focus,
.ap-button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff
}

.ap-button--primary:active {
    outline: 0
}

.ap-button--primary.is-active,
.ap-button--primary:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff
}

.ap-button--primary.is-disabled,
.ap-button--primary.is-disabled:active,
.ap-button--primary.is-disabled:focus,
.ap-button--primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff
}

.ap-button--primary.is-plain {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff
}

.ap-button--primary.is-plain:focus,
.ap-button--primary.is-plain:hover {
    background: #409eff;
    border-color: #409eff;
    color: #fff
}

.ap-button--primary.is-plain:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
    outline: 0
}

.ap-button--primary.is-plain.is-disabled,
.ap-button--primary.is-plain.is-disabled:active,
.ap-button--primary.is-plain.is-disabled:focus,
.ap-button--primary.is-plain.is-disabled:hover {
    color: #8cc5ff;
    background-color: #ecf5ff;
    border-color: #d9ecff
}

.ap-button--success {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a
}

.ap-button--success:focus,
.ap-button--success:hover {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff
}

.ap-button--success.is-active,
.ap-button--success:active {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff
}

.ap-button--success:active {
    outline: 0
}

.ap-button--success.is-disabled,
.ap-button--success.is-disabled:active,
.ap-button--success.is-disabled:focus,
.ap-button--success.is-disabled:hover {
    color: #fff;
    background-color: #b3e19d;
    border-color: #b3e19d
}

.ap-button--success.is-plain {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0
}

.ap-button--success.is-plain:focus,
.ap-button--success.is-plain:hover {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff
}

.ap-button--success.is-plain:active {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff;
    outline: 0
}

.ap-button--success.is-plain.is-disabled,
.ap-button--success.is-plain.is-disabled:active,
.ap-button--success.is-plain.is-disabled:focus,
.ap-button--success.is-plain.is-disabled:hover {
    color: #a4da89;
    background-color: #f0f9eb;
    border-color: #e1f3d8
}

.ap-button--warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c
}

.ap-button--warning:focus,
.ap-button--warning:hover {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff
}

.ap-button--warning.is-active,
.ap-button--warning:active {
    background: #cf9236;
    border-color: #cf9236;
    color: #fff
}

.ap-button--warning:active {
    outline: 0
}

.ap-button--warning.is-disabled,
.ap-button--warning.is-disabled:active,
.ap-button--warning.is-disabled:focus,
.ap-button--warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e
}

.ap-button--warning.is-plain {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1
}

.ap-button--warning.is-plain:focus,
.ap-button--warning.is-plain:hover {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff
}

.ap-button--warning.is-plain:active {
    background: #cf9236;
    border-color: #cf9236;
    color: #fff;
    outline: 0
}

.ap-button--warning.is-plain.is-disabled,
.ap-button--warning.is-plain.is-disabled:active,
.ap-button--warning.is-plain.is-disabled:focus,
.ap-button--warning.is-plain.is-disabled:hover {
    color: #f0c78a;
    background-color: #fdf6ec;
    border-color: #faecd8
}

.ap-button--danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c
}

.ap-button--danger:focus,
.ap-button--danger:hover {
    background: #f78989;
    border-color: #f78989;
    color: #fff
}

.ap-button--danger.is-active,
.ap-button--danger:active {
    background: #dd6161;
    border-color: #dd6161;
    color: #fff
}

.ap-button--danger:active {
    outline: 0
}

.ap-button--danger.is-disabled,
.ap-button--danger.is-disabled:active,
.ap-button--danger.is-disabled:focus,
.ap-button--danger.is-disabled:hover {
    color: #fff;
    background-color: #fab6b6;
    border-color: #fab6b6
}

.ap-button--danger.is-plain {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4
}

.ap-button--danger.is-plain:focus,
.ap-button--danger.is-plain:hover {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff
}

.ap-button--danger.is-plain:active {
    background: #dd6161;
    border-color: #dd6161;
    color: #fff;
    outline: 0
}

.ap-button--danger.is-plain.is-disabled,
.ap-button--danger.is-plain.is-disabled:active,
.ap-button--danger.is-plain.is-disabled:focus,
.ap-button--danger.is-plain.is-disabled:hover {
    color: #f9a7a7;
    background-color: #fef0f0;
    border-color: #fde2e2
}

.ap-button--info {
    color: #fff;
    background-color: #909399;
    border-color: #909399
}

.ap-button--info:focus,
.ap-button--info:hover {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff
}

.ap-button--info.is-active,
.ap-button--info:active {
    background: #82848a;
    border-color: #82848a;
    color: #fff
}

.ap-button--info:active {
    outline: 0
}

.ap-button--info.is-disabled,
.ap-button--info.is-disabled:active,
.ap-button--info.is-disabled:focus,
.ap-button--info.is-disabled:hover {
    color: #fff;
    background-color: #c8c9cc;
    border-color: #c8c9cc
}

.ap-button--info.is-plain {
    color: #909399;
    background: #f4f4f5;
    border-color: #d3d4d6
}

.ap-button--info.is-plain:focus,
.ap-button--info.is-plain:hover {
    background: #909399;
    border-color: #909399;
    color: #fff
}

.ap-button--info.is-plain:active {
    background: #82848a;
    border-color: #82848a;
    color: #fff;
    outline: 0
}

.ap-button--info.is-plain.is-disabled,
.ap-button--info.is-plain.is-disabled:active,
.ap-button--info.is-plain.is-disabled:focus,
.ap-button--info.is-plain.is-disabled:hover {
    color: #bcbec2;
    background-color: #f4f4f5;
    border-color: #e9e9eb
}

.ap-button--medium {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px
}

.ap-button--mini,
.ap-button--small {
    font-size: 12px;
    border-radius: 3px
}

.ap-button--medium.is-round {
    padding: 10px 20px
}

.ap-button--medium.is-circle {
    padding: 10px
}

.ap-button--small,
.ap-button--small.is-round {
    padding: 9px 15px
}

.ap-button--small.is-circle {
    padding: 9px
}

.ap-button--mini,
.ap-button--mini.is-round {
    padding: 7px 15px
}

.ap-button--mini.is-circle {
    padding: 7px
}

.ap-button--text {
    border-color: transparent;
    color: #409eff;
    background: 0 0;
    padding-left: 0;
    padding-right: 0
}

.ap-button--text:focus,
.ap-button--text:hover {
    color: #66b1ff;
    border-color: transparent;
    background-color: initial
}

.ap-button--text:active {
    color: #3a8ee6;
    border-color: transparent;
    background-color: initial
}

.ap-input__inner,
.ap-textarea__inner {
    color: #606266
}

.ap-button--text.is-disabled,
.ap-button--text.is-disabled:focus,
.ap-button--text.is-disabled:hover {
    border-color: transparent
}

.ap-button-group .ap-button--danger:last-child,
.ap-button-group .ap-button--danger:not(:first-child):not(:last-child),
.ap-button-group .ap-button--info:last-child,
.ap-button-group .ap-button--info:not(:first-child):not(:last-child),
.ap-button-group .ap-button--primary:last-child,
.ap-button-group .ap-button--primary:not(:first-child):not(:last-child),
.ap-button-group .ap-button--success:last-child,
.ap-button-group .ap-button--success:not(:first-child):not(:last-child),
.ap-button-group .ap-button--warning:last-child,
.ap-button-group .ap-button--warning:not(:first-child):not(:last-child),
.ap-button-group>.ap-dropdown>.ap-button {
    border-left-color: hsla(0, 0%, 100%, .5)
}

.ap-button-group .ap-button--danger:first-child,
.ap-button-group .ap-button--danger:not(:first-child):not(:last-child),
.ap-button-group .ap-button--info:first-child,
.ap-button-group .ap-button--info:not(:first-child):not(:last-child),
.ap-button-group .ap-button--primary:first-child,
.ap-button-group .ap-button--primary:not(:first-child):not(:last-child),
.ap-button-group .ap-button--success:first-child,
.ap-button-group .ap-button--success:not(:first-child):not(:last-child),
.ap-button-group .ap-button--warning:first-child,
.ap-button-group .ap-button--warning:not(:first-child):not(:last-child) {
    border-right-color: hsla(0, 0%, 100%, .5)
}

.ap-button-group {
    display: inline-block;
    vertical-align: middle
}

.ap-button-group:after,
.ap-button-group:before {
    display: table;
    content: ""
}

.ap-button-group:after {
    clear: both
}

.ap-button-group>.ap-button {
    float: left;
    position: relative
}

.ap-button-group>.ap-button+.ap-button {
    margin-left: 0
}

.ap-button-group>.ap-button.is-disabled {
    z-index: 1
}

.ap-button-group>.ap-button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.ap-button-group>.ap-button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.ap-button-group>.ap-button:first-child:last-child,
.ap-input__inner {
    border-radius: 4px
}

.ap-button-group>.ap-button:first-child:last-child.is-round {
    border-radius: 20px
}

.ap-button-group>.ap-button:first-child:last-child.is-circle {
    border-radius: 50%
}

.ap-button-group>.ap-button:not(:first-child):not(:last-child) {
    border-radius: 0
}

.ap-button-group>.ap-button:not(:last-child) {
    margin-right: -1px
}

.ap-button-group>.ap-button.is-active,
.ap-button-group>.ap-button:active,
.ap-button-group>.ap-button:focus,
.ap-button-group>.ap-button:hover {
    z-index: 1
}

.ap-button-group>.ap-dropdown>.ap-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.ap-input__inner,
.ap-textarea__inner {
    background-color: #fff
}

.ap-input__inner {
    font-size: inherit
}

.ap-input__inner:hover {
    border-color: #c0c4cc
}

.ap-input-group__append .ap-button,
.ap-input-group__append .ap-input,
.ap-input-group__prepend .ap-button,
.ap-input-group__prepend .ap-input {
    font-size: inherit
}

.ap-message-box {
    display: inline-block;
    width: 420px;
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    font-size: 18px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    text-align: left;
    backface-visibility: hidden
}

.ap-message-box__wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center
}

.ap-message-box__wrapper:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle
}

.ap-message-box__header {
    position: relative;
    padding: 15px 15px 10px
}

.ap-message-box__title {
    padding-left: 0;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1;
    color: #303133
}

.ap-message-box__headerbtn {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 16px;
    cursor: pointer
}

.ap-message-box__headerbtn .ap-message-box__close {
    color: #909399
}

.ap-message-box__headerbtn:focus .ap-message-box__close,
.ap-message-box__headerbtn:hover .ap-message-box__close {
    color: #409eff
}

.ap-message-box__content {
    padding: 10px 15px;
    color: #606266;
    font-size: 14px
}

.ap-message-box__container {
    position: relative
}

.ap-message-box__input {
    padding-top: 15px
}

.ap-message-box__input input.invalid,
.ap-message-box__input input.invalid:focus {
    border-color: #f56c6c
}

.ap-message-box__status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px !important
}

.ap-message-box__status:before {
    padding-left: 1px
}

.ap-message-box__status+.ap-message-box__message {
    padding-left: 36px;
    padding-right: 12px
}

.ap-message-box__status.ap-icon-success {
    color: #67c23a
}

.ap-message-box__status.ap-icon-info {
    color: #909399
}

.ap-message-box__status.ap-icon-warning {
    color: #e6a23c
}

.ap-message-box__status.ap-icon-error {
    color: #f56c6c
}

.ap-message-box__message {
    margin: 0
}

.ap-message-box__message p {
    margin: 0;
    line-height: 24px
}

.ap-message-box__errormsg {
    color: #f56c6c;
    font-size: 12px;
    min-height: 18px;
    margin-top: 2px
}

.ap-message-box__btns {
    padding: 5px 15px 0;
    text-align: right
}

.ap-message-box__btns button:nth-child(2) {
    margin-left: 10px
}

.ap-message-box__btns-reverse {
    flex-direction: row-reverse
}

.ap-message-box--center {
    padding-bottom: 30px
}

.ap-message-box--center .ap-message-box__header {
    padding-top: 30px
}

.ap-message-box--center .ap-message-box__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.ap-message-box--center .ap-message-box__status {
    position: relative;
    top: auto;
    padding-right: 5px;
    text-align: center;
    transform: translateY(-1px)
}

.ap-message-box--center .ap-message-box__message {
    margin-left: 0
}

.ap-message-box--center .ap-message-box__btns,
.ap-message-box--center .ap-message-box__content {
    text-align: center
}

.ap-message-box--center .ap-message-box__content {
    padding-left: 27px;
    padding-right: 27px
}

.msgbox-fade-enter-active {
    animation: msgbox-fade-in .3s
}

.msgbox-fade-leave-active {
    animation: msgbox-fade-out .3s
}

@keyframes msgbox-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes msgbox-fade-out {
    0% {
        transform: translateZ(0);
        opacity: 1
    }

    to {
        transform: translate3d(0, -20px, 0);
        opacity: 0
    }
}

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
    transition: opacity .2s linear
}

.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
    opacity: 0
}

.ap-fade-in-linear-enter-active,
.ap-fade-in-linear-leave-active {
    transition: opacity .2s linear
}

.ap-fade-in-linear-enter,
.ap-fade-in-linear-leave,
.ap-fade-in-linear-leave-active {
    opacity: 0
}

.ap-fade-in-enter-active,
.ap-fade-in-leave-active {
    transition: all .3s cubic-bezier(.55, 0, .1, 1)
}

.ap-fade-in-enter,
.ap-fade-in-leave-active {
    opacity: 0
}

.ap-zoom-in-center-enter-active,
.ap-zoom-in-center-leave-active {
    transition: all .3s cubic-bezier(.55, 0, .1, 1)
}

.ap-zoom-in-center-enter,
.ap-zoom-in-center-leave-active {
    opacity: 0;
    transform: scaleX(0)
}

.ap-zoom-in-top-enter-active,
.ap-zoom-in-top-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
    transform-origin: center top
}

.ap-zoom-in-top-enter,
.ap-zoom-in-top-leave-active {
    opacity: 0;
    transform: scaleY(0)
}

.ap-zoom-in-bottom-enter-active,
.ap-zoom-in-bottom-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
    transform-origin: center bottom
}

.ap-zoom-in-bottom-enter,
.ap-zoom-in-bottom-leave-active {
    opacity: 0;
    transform: scaleY(0)
}

.ap-zoom-in-left-enter-active,
.ap-zoom-in-left-leave-active {
    opacity: 1;
    transform: scale(1);
    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
    transform-origin: top left
}

.ap-zoom-in-left-enter,
.ap-zoom-in-left-leave-active {
    opacity: 0;
    transform: scale(.45)
}

.collapse-transition {
    transition: height .3s ease-in-out, padding-top .3s ease-in-out, padding-bottom .3s ease-in-out
}

.horizontal-collapse-transition {
    transition: width .3s ease-in-out, padding-left .3s ease-in-out, padding-right .3s ease-in-out
}

.ap-list-enter-active,
.ap-list-leave-active {
    transition: all 1s
}

.ap-list-enter,
.ap-list-leave-active {
    opacity: 0;
    transform: translateY(-30px)
}

.ap-opacity-transition {
    transition: opacity .3s cubic-bezier(.55, 0, .1, 1)
}

@font-face {
    font-family: element-icons;
    src: url(https://qncdn.aoscdn.com/projects/picwish/assets/fonts/element-icons.313f7dac.woff) format("woff"), url(https://qncdn.aoscdn.com/projects/picwish/assets/fonts/element-icons.45201881.ttf) format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal
}

[class*=" ap-icon-"],
[class^=ap-icon-] {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: initial;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.ap-icon-ice-cream-round:before {
    content: "\e6a0"
}

.ap-icon-ice-cream-square:before {
    content: "\e6a3"
}

.ap-icon-lollipop:before {
    content: "\e6a4"
}

.ap-icon-potato-strips:before {
    content: "\e6a5"
}

.ap-icon-milk-tea:before {
    content: "\e6a6"
}

.ap-icon-ice-drink:before {
    content: "\e6a7"
}

.ap-icon-ice-tea:before {
    content: "\e6a9"
}

.ap-icon-coffee:before {
    content: "\e6aa"
}

.ap-icon-orange:before {
    content: "\e6ab"
}

.ap-icon-pear:before {
    content: "\e6ac"
}

.ap-icon-apple:before {
    content: "\e6ad"
}

.ap-icon-cherry:before {
    content: "\e6ae"
}

.ap-icon-watermelon:before {
    content: "\e6af"
}

.ap-icon-grape:before {
    content: "\e6b0"
}

.ap-icon-refrigerator:before {
    content: "\e6b1"
}

.ap-icon-goblet-square-full:before {
    content: "\e6b2"
}

.ap-icon-goblet-square:before {
    content: "\e6b3"
}

.ap-icon-goblet-full:before {
    content: "\e6b4"
}

.ap-icon-goblet:before {
    content: "\e6b5"
}

.ap-icon-cold-drink:before {
    content: "\e6b6"
}

.ap-icon-coffee-cup:before {
    content: "\e6b8"
}

.ap-icon-water-cup:before {
    content: "\e6b9"
}

.ap-icon-hot-water:before {
    content: "\e6ba"
}

.ap-icon-ice-cream:before {
    content: "\e6bb"
}

.ap-icon-dessert:before {
    content: "\e6bc"
}

.ap-icon-sugar:before {
    content: "\e6bd"
}

.ap-icon-tableware:before {
    content: "\e6be"
}

.ap-icon-burger:before {
    content: "\e6bf"
}

.ap-icon-knife-fork:before {
    content: "\e6c1"
}

.ap-icon-fork-spoon:before {
    content: "\e6c2"
}

.ap-icon-chicken:before {
    content: "\e6c3"
}

.ap-icon-food:before {
    content: "\e6c4"
}

.ap-icon-dish-1:before {
    content: "\e6c5"
}

.ap-icon-dish:before {
    content: "\e6c6"
}

.ap-icon-moon-night:before {
    content: "\e6ee"
}

.ap-icon-moon:before {
    content: "\e6f0"
}

.ap-icon-cloudy-and-sunny:before {
    content: "\e6f1"
}

.ap-icon-partly-cloudy:before {
    content: "\e6f2"
}

.ap-icon-cloudy:before {
    content: "\e6f3"
}

.ap-icon-sunny:before {
    content: "\e6f6"
}

.ap-icon-sunset:before {
    content: "\e6f7"
}

.ap-icon-sunrise-1:before {
    content: "\e6f8"
}

.ap-icon-sunrise:before {
    content: "\e6f9"
}

.ap-icon-heavy-rain:before {
    content: "\e6fa"
}

.ap-icon-lightning:before {
    content: "\e6fb"
}

.ap-icon-light-rain:before {
    content: "\e6fc"
}

.ap-icon-wind-power:before {
    content: "\e6fd"
}

.ap-icon-baseball:before {
    content: "\e712"
}

.ap-icon-soccer:before {
    content: "\e713"
}

.ap-icon-football:before {
    content: "\e715"
}

.ap-icon-basketball:before {
    content: "\e716"
}

.ap-icon-ship:before {
    content: "\e73f"
}

.ap-icon-truck:before {
    content: "\e740"
}

.ap-icon-bicycle:before {
    content: "\e741"
}

.ap-icon-mobile-phone:before {
    content: "\e6d3"
}

.ap-icon-service:before {
    content: "\e6d4"
}

.ap-icon-key:before {
    content: "\e6e2"
}

.ap-icon-unlock:before {
    content: "\e6e4"
}

.ap-icon-lock:before {
    content: "\e6e5"
}

.ap-icon-watch:before {
    content: "\e6fe"
}

.ap-icon-watch-1:before {
    content: "\e6ff"
}

.ap-icon-timer:before {
    content: "\e702"
}

.ap-icon-alarm-clock:before {
    content: "\e703"
}

.ap-icon-map-location:before {
    content: "\e704"
}

.ap-icon-delete-location:before {
    content: "\e705"
}

.ap-icon-add-location:before {
    content: "\e706"
}

.ap-icon-location-information:before {
    content: "\e707"
}

.ap-icon-location-outline:before {
    content: "\e708"
}

.ap-icon-location:before {
    content: "\e79e"
}

.ap-icon-place:before {
    content: "\e709"
}

.ap-icon-discover:before {
    content: "\e70a"
}

.ap-icon-first-aid-kit:before {
    content: "\e70b"
}

.ap-icon-trophy-1:before {
    content: "\e70c"
}

.ap-icon-trophy:before {
    content: "\e70d"
}

.ap-icon-medal:before {
    content: "\e70e"
}

.ap-icon-medal-1:before {
    content: "\e70f"
}

.ap-icon-stopwatch:before {
    content: "\e710"
}

.ap-icon-mic:before {
    content: "\e711"
}

.ap-icon-copy-document:before {
    content: "\e718"
}

.ap-icon-full-screen:before {
    content: "\e719"
}

.ap-icon-switch-button:before {
    content: "\e71b"
}

.ap-icon-aim:before {
    content: "\e71c"
}

.ap-icon-crop:before {
    content: "\e71d"
}

.ap-icon-odometer:before {
    content: "\e71e"
}

.ap-icon-time:before {
    content: "\e71f"
}

.ap-icon-bangzhu:before {
    content: "\e724"
}

.ap-icon-close-notification:before {
    content: "\e726"
}

.ap-icon-microphone:before {
    content: "\e727"
}

.ap-icon-turn-off-microphone:before {
    content: "\e728"
}

.ap-icon-position:before {
    content: "\e729"
}

.ap-icon-postcard:before {
    content: "\e72a"
}

.ap-icon-message:before {
    content: "\e72b"
}

.ap-icon-chat-line-square:before {
    content: "\e72d"
}

.ap-icon-chat-dot-square:before {
    content: "\e72e"
}

.ap-icon-chat-dot-round:before {
    content: "\e72f"
}

.ap-icon-chat-square:before {
    content: "\e730"
}

.ap-icon-chat-line-round:before {
    content: "\e731"
}

.ap-icon-chat-round:before {
    content: "\e732"
}

.ap-icon-set-up:before {
    content: "\e733"
}

.ap-icon-turn-off:before {
    content: "\e734"
}

.ap-icon-open:before {
    content: "\e735"
}

.ap-icon-connection:before {
    content: "\e736"
}

.ap-icon-link:before {
    content: "\e737"
}

.ap-icon-cpu:before {
    content: "\e738"
}

.ap-icon-thumb:before {
    content: "\e739"
}

.ap-icon-female:before {
    content: "\e73a"
}

.ap-icon-male:before {
    content: "\e73b"
}

.ap-icon-guide:before {
    content: "\e73c"
}

.ap-icon-news:before {
    content: "\e73e"
}

.ap-icon-price-tag:before {
    content: "\e744"
}

.ap-icon-discount:before {
    content: "\e745"
}

.ap-icon-wallet:before {
    content: "\e747"
}

.ap-icon-coin:before {
    content: "\e748"
}

.ap-icon-money:before {
    content: "\e749"
}

.ap-icon-bank-card:before {
    content: "\e74a"
}

.ap-icon-box:before {
    content: "\e74b"
}

.ap-icon-present:before {
    content: "\e74c"
}

.ap-icon-sell:before {
    content: "\e6d5"
}

.ap-icon-sold-out:before {
    content: "\e6d6"
}

.ap-icon-shopping-bag-2:before {
    content: "\e74d"
}

.ap-icon-shopping-bag-1:before {
    content: "\e74e"
}

.ap-icon-shopping-cart-2:before {
    content: "\e74f"
}

.ap-icon-shopping-cart-1:before {
    content: "\e750"
}

.ap-icon-shopping-cart-full:before {
    content: "\e751"
}

.ap-icon-smoking:before {
    content: "\e752"
}

.ap-icon-no-smoking:before {
    content: "\e753"
}

.ap-icon-house:before {
    content: "\e754"
}

.ap-icon-table-lamp:before {
    content: "\e755"
}

.ap-icon-school:before {
    content: "\e756"
}

.ap-icon-office-building:before {
    content: "\e757"
}

.ap-icon-toilet-paper:before {
    content: "\e758"
}

.ap-icon-notebook-2:before {
    content: "\e759"
}

.ap-icon-notebook-1:before {
    content: "\e75a"
}

.ap-icon-files:before {
    content: "\e75b"
}

.ap-icon-collection:before {
    content: "\e75c"
}

.ap-icon-receiving:before {
    content: "\e75d"
}

.ap-icon-suitcase-1:before {
    content: "\e760"
}

.ap-icon-suitcase:before {
    content: "\e761"
}

.ap-icon-film:before {
    content: "\e763"
}

.ap-icon-collection-tag:before {
    content: "\e765"
}

.ap-icon-data-analysis:before {
    content: "\e766"
}

.ap-icon-pie-chart:before {
    content: "\e767"
}

.ap-icon-data-board:before {
    content: "\e768"
}

.ap-icon-data-line:before {
    content: "\e76d"
}

.ap-icon-reading:before {
    content: "\e769"
}

.ap-icon-magic-stick:before {
    content: "\e76a"
}

.ap-icon-coordinate:before {
    content: "\e76b"
}

.ap-icon-mouse:before {
    content: "\e76c"
}

.ap-icon-brush:before {
    content: "\e76e"
}

.ap-icon-headset:before {
    content: "\e76f"
}

.ap-icon-umbrella:before {
    content: "\e770"
}

.ap-icon-scissors:before {
    content: "\e771"
}

.ap-icon-mobile:before {
    content: "\e773"
}

.ap-icon-attract:before {
    content: "\e774"
}

.ap-icon-monitor:before {
    content: "\e775"
}

.ap-icon-search:before {
    content: "\e778"
}

.ap-icon-takeaway-box:before {
    content: "\e77a"
}

.ap-icon-paperclip:before {
    content: "\e77d"
}

.ap-icon-printer:before {
    content: "\e77e"
}

.ap-icon-document-add:before {
    content: "\e782"
}

.ap-icon-document:before {
    content: "\e785"
}

.ap-icon-document-checked:before {
    content: "\e786"
}

.ap-icon-document-copy:before {
    content: "\e787"
}

.ap-icon-document-delete:before {
    content: "\e788"
}

.ap-icon-document-remove:before {
    content: "\e789"
}

.ap-icon-tickets:before {
    content: "\e78b"
}

.ap-icon-folder-checked:before {
    content: "\e77f"
}

.ap-icon-folder-delete:before {
    content: "\e780"
}

.ap-icon-folder-remove:before {
    content: "\e781"
}

.ap-icon-folder-add:before {
    content: "\e783"
}

.ap-icon-folder-opened:before {
    content: "\e784"
}

.ap-icon-folder:before {
    content: "\e78a"
}

.ap-icon-edit-outline:before {
    content: "\e764"
}

.ap-icon-edit:before {
    content: "\e78c"
}

.ap-icon-date:before {
    content: "\e78e"
}

.ap-icon-c-scale-to-original:before {
    content: "\e7c6"
}

.ap-icon-view:before {
    content: "\e6ce"
}

.ap-icon-loading:before {
    content: "\e6cf"
}

.ap-icon-rank:before {
    content: "\e6d1"
}

.ap-icon-sort-down:before {
    content: "\e7c4"
}

.ap-icon-sort-up:before {
    content: "\e7c5"
}

.ap-icon-sort:before {
    content: "\e6d2"
}

.ap-icon-finished:before {
    content: "\e6cd"
}

.ap-icon-refresh-left:before {
    content: "\e6c7"
}

.ap-icon-refresh-right:before {
    content: "\e6c8"
}

.ap-icon-refresh:before {
    content: "\e6d0"
}

.ap-icon-video-play:before {
    content: "\e7c0"
}

.ap-icon-video-pause:before {
    content: "\e7c1"
}

.ap-icon-d-arrow-right:before {
    content: "\e6dc"
}

.ap-icon-d-arrow-left:before {
    content: "\e6dd"
}

.ap-icon-arrow-up:before {
    content: "\e6e1"
}

.ap-icon-arrow-down:before {
    content: "\e6df"
}

.ap-icon-arrow-right:before {
    content: "\e6e0"
}

.ap-icon-arrow-left:before {
    content: "\e6de"
}

.ap-icon-top-right:before {
    content: "\e6e7"
}

.ap-icon-top-left:before {
    content: "\e6e8"
}

.ap-icon-top:before {
    content: "\e6e6"
}

.ap-icon-bottom:before {
    content: "\e6eb"
}

.ap-icon-right:before {
    content: "\e6e9"
}

.ap-icon-back:before {
    content: "\e6ea"
}

.ap-icon-bottom-right:before {
    content: "\e6ec"
}

.ap-icon-bottom-left:before {
    content: "\e6ed"
}

.ap-icon-caret-top:before {
    content: "\e78f"
}

.ap-icon-caret-bottom:before {
    content: "\e790"
}

.ap-icon-caret-right:before {
    content: "\e791"
}

.ap-icon-caret-left:before {
    content: "\e792"
}

.ap-icon-d-caret:before {
    content: "\e79a"
}

.ap-icon-share:before {
    content: "\e793"
}

.ap-icon-menu:before {
    content: "\e798"
}

.ap-icon-s-grid:before {
    content: "\e7a6"
}

.ap-icon-s-check:before {
    content: "\e7a7"
}

.ap-icon-s-data:before {
    content: "\e7a8"
}

.ap-icon-s-opportunity:before {
    content: "\e7aa"
}

.ap-icon-s-custom:before {
    content: "\e7ab"
}

.ap-icon-s-claim:before {
    content: "\e7ad"
}

.ap-icon-s-finance:before {
    content: "\e7ae"
}

.ap-icon-s-comment:before {
    content: "\e7af"
}

.ap-icon-s-flag:before {
    content: "\e7b0"
}

.ap-icon-s-marketing:before {
    content: "\e7b1"
}

.ap-icon-s-shop:before {
    content: "\e7b4"
}

.ap-icon-s-open:before {
    content: "\e7b5"
}

.ap-icon-s-management:before {
    content: "\e7b6"
}

.ap-icon-s-ticket:before {
    content: "\e7b7"
}

.ap-icon-s-release:before {
    content: "\e7b8"
}

.ap-icon-s-home:before {
    content: "\e7b9"
}

.ap-icon-s-promotion:before {
    content: "\e7ba"
}

.ap-icon-s-operation:before {
    content: "\e7bb"
}

.ap-icon-s-unfold:before {
    content: "\e7bc"
}

.ap-icon-s-fold:before {
    content: "\e7a9"
}

.ap-icon-s-platform:before {
    content: "\e7bd"
}

.ap-icon-s-order:before {
    content: "\e7be"
}

.ap-icon-s-cooperation:before {
    content: "\e7bf"
}

.ap-icon-bell:before {
    content: "\e725"
}

.ap-icon-message-solid:before {
    content: "\e799"
}

.ap-icon-video-camera:before {
    content: "\e772"
}

.ap-icon-video-camera-solid:before {
    content: "\e796"
}

.ap-icon-camera:before {
    content: "\e779"
}

.ap-icon-camera-solid:before {
    content: "\e79b"
}

.ap-icon-download:before {
    content: "\e77c"
}

.ap-icon-upload2:before {
    content: "\e77b"
}

.ap-icon-upload:before {
    content: "\e7c3"
}

.ap-icon-picture-outline-round:before {
    content: "\e75f"
}

.ap-icon-picture-outline:before {
    content: "\e75e"
}

.ap-icon-picture:before {
    content: "\e79f"
}

.ap-icon-close:before {
    content: "\e6db"
}

.ap-icon-check:before {
    content: "\e6da"
}

.ap-icon-plus:before {
    content: "\e6d9"
}

.ap-icon-minus:before {
    content: "\e6d8"
}

.ap-icon-help:before {
    content: "\e73d"
}

.ap-icon-s-help:before {
    content: "\e7b3"
}

.ap-icon-circle-close:before {
    content: "\e78d"
}

.ap-icon-circle-check:before {
    content: "\e720"
}

.ap-icon-circle-plus-outline:before {
    content: "\e723"
}

.ap-icon-remove-outline:before {
    content: "\e722"
}

.ap-icon-zoom-out:before {
    content: "\e776"
}

.ap-icon-zoom-in:before {
    content: "\e777"
}

.ap-icon-error:before {
    content: "\e79d"
}

.ap-icon-success:before {
    content: "\e79c"
}

.ap-icon-circle-plus:before {
    content: "\e7a0"
}

.ap-icon-remove:before {
    content: "\e7a2"
}

.ap-icon-info:before {
    content: "\e7a1"
}

.ap-icon-question:before {
    content: "\e7a4"
}

.ap-icon-warning-outline:before {
    content: "\e6c9"
}

.ap-icon-warning:before {
    content: "\e7a3"
}

.ap-icon-goods:before {
    content: "\e7c2"
}

.ap-icon-s-goods:before {
    content: "\e7b2"
}

.ap-icon-star-off:before {
    content: "\e717"
}

.ap-icon-star-on:before {
    content: "\e797"
}

.ap-icon-more-outline:before {
    content: "\e6cc"
}

.ap-icon-more:before {
    content: "\e794"
}

.ap-icon-phone-outline:before {
    content: "\e6cb"
}

.ap-icon-phone:before {
    content: "\e795"
}

.ap-icon-user:before {
    content: "\e6e3"
}

.ap-icon-user-solid:before {
    content: "\e7a5"
}

.ap-icon-setting:before {
    content: "\e6ca"
}

.ap-icon-s-tools:before {
    content: "\e7ac"
}

.ap-icon-delete:before {
    content: "\e6d7"
}

.ap-icon-delete-solid:before {
    content: "\e7c9"
}

.ap-icon-eleme:before {
    content: "\e7c7"
}

.ap-icon-platform-eleme:before {
    content: "\e7ca"
}

.ap-icon-loading {
    animation: rotating 2s linear infinite
}

.ap-icon--right {
    margin-left: 5px
}

.ap-icon--left {
    margin-right: 5px
}

@keyframes rotating {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.ap-input__inner,
.ap-textarea__inner {
    background-color: #fff;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    -webkit-box-sizing: border-box
}

.ap-textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    font-size: 14px
}

.ap-textarea__inner {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    font-size: inherit;
    color: #606266;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1)
}

.ap-textarea__inner::placeholder {
    color: #c0c4cc
}

.ap-textarea__inner:hover {
    border-color: #c0c4cc
}

.ap-textarea__inner:focus {
    outline: 0;
    border-color: #409eff
}

.ap-textarea .ap-input__count {
    color: #909399;
    background: #fff;
    position: absolute;
    font-size: 12px;
    bottom: 5px;
    right: 10px
}

.ap-textarea.is-disabled .ap-textarea__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed
}

.ap-textarea.is-disabled .ap-textarea__inner::placeholder {
    color: #c0c4cc
}

.ap-textarea.is-exceed .ap-textarea__inner {
    border-color: #f56c6c
}

.ap-textarea.is-exceed .ap-input__count {
    color: #f56c6c
}

.ap-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%
}

.ap-input::-webkit-scrollbar {
    z-index: 11;
    width: 6px
}

.ap-input::-webkit-scrollbar:horizontal {
    height: 6px
}

.ap-input::-webkit-scrollbar-thumb {
    border-radius: 5px;
    width: 6px;
    background: #b4bccc
}

.ap-input::-webkit-scrollbar-corner,
.ap-input::-webkit-scrollbar-track {
    background: #fff
}

.ap-input::-webkit-scrollbar-track-piece {
    background: #fff;
    width: 6px
}

.ap-input .ap-input__clear {
    color: #c0c4cc;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s cubic-bezier(.645, .045, .355, 1)
}

.ap-input .ap-input__clear:hover {
    color: #909399
}

.ap-input .ap-input__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: #909399;
    font-size: 12px
}

.ap-input-group__append .ap-button,
.ap-input-group__append .ap-input,
.ap-input-group__prepend .ap-button,
.ap-input-group__prepend .ap-input,
.ap-input__inner {
    font-size: inherit
}

.ap-input .ap-input__count .ap-input__count-inner {
    background: #fff;
    line-height: normal;
    display: inline-block;
    padding: 0 5px
}

.ap-input__inner {
    -webkit-appearance: none;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1)
}

.ap-input__inner:hover,
.ap-slider__runway.disabled .ap-slider__button {
    border-color: #c0c4cc
}

.ap-input__prefix,
.ap-input__suffix {
    -webkit-transition: all .3s;
    height: 100%;
    color: #c0c4cc;
    position: absolute;
    top: 0;
    text-align: center
}

.ap-input__inner::placeholder {
    color: #c0c4cc
}

.ap-input.is-active .ap-input__inner,
.ap-input__inner:focus {
    border-color: #409eff;
    outline: 0
}

.ap-input__suffix {
    right: 5px;
    transition: all .3s;
    pointer-events: none
}

.ap-input__suffix-inner {
    pointer-events: all
}

.ap-input__prefix {
    left: 5px;
    transition: all .3s
}

.ap-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px
}

.ap-input__icon:after {
    content: "";
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle
}

.ap-input__validateIcon {
    pointer-events: none
}

.ap-input.is-disabled .ap-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed
}

.ap-input.is-disabled .ap-input__inner::placeholder {
    color: #c0c4cc
}

.ap-input.is-disabled .ap-input__icon {
    cursor: not-allowed
}

.ap-input.is-exceed .ap-input__inner {
    border-color: #f56c6c
}

.ap-input.is-exceed .ap-input__suffix .ap-input__count {
    color: #f56c6c
}

.ap-input--suffix .ap-input__inner {
    padding-right: 30px
}

.ap-input--prefix .ap-input__inner {
    padding-left: 30px
}

.ap-input--medium {
    font-size: 14px
}

.ap-input--medium .ap-input__inner {
    height: 36px;
    line-height: 36px
}

.ap-input--medium .ap-input__icon {
    line-height: 36px
}

.ap-input--small {
    font-size: 13px
}

.ap-input--small .ap-input__inner {
    height: 32px;
    line-height: 32px
}

.ap-input--small .ap-input__icon {
    line-height: 32px
}

.ap-input--mini {
    font-size: 12px
}

.ap-input--mini .ap-input__inner {
    height: 28px;
    line-height: 28px
}

.ap-input--mini .ap-input__icon {
    line-height: 28px
}

.ap-input-group {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: initial;
    border-spacing: 0
}

.ap-input-group>.ap-input__inner {
    vertical-align: middle;
    display: table-cell
}

.ap-input-group__append,
.ap-input-group__prepend {
    background-color: #f5f7fa;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap
}

.ap-input-group--prepend .ap-input__inner,
.ap-input-group__append {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.ap-input-group--append .ap-input__inner,
.ap-input-group__prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.ap-input-group__append:focus,
.ap-input-group__prepend:focus {
    outline: 0
}

.ap-input-group__append .ap-button,
.ap-input-group__append .ap-select,
.ap-input-group__prepend .ap-button,
.ap-input-group__prepend .ap-select {
    display: inline-block;
    margin: -10px -20px
}

.ap-input-group__append button.ap-button,
.ap-input-group__append div.ap-select .ap-input__inner,
.ap-input-group__append div.ap-select:hover .ap-input__inner,
.ap-input-group__prepend button.ap-button,
.ap-input-group__prepend div.ap-select .ap-input__inner,
.ap-input-group__prepend div.ap-select:hover .ap-input__inner {
    border-color: transparent;
    background-color: initial;
    color: inherit;
    border-top: 0;
    border-bottom: 0
}

.ap-input-group__prepend {
    border-right: 0
}

.ap-input-group__append {
    border-left: 0
}

.ap-input-group--append .ap-select .ap-input.is-focus .ap-input__inner,
.ap-input-group--prepend .ap-select .ap-input.is-focus .ap-input__inner {
    border-color: transparent
}

.ap-input__inner::-ms-clear {
    display: none;
    width: 0;
    height: 0
}

.ap-input-number {
    position: relative;
    display: inline-block;
    width: 180px;
    line-height: 38px
}

.ap-input-number .ap-input {
    display: block
}

.ap-input-number .ap-input__inner {
    -webkit-appearance: none;
    padding-left: 50px;
    padding-right: 50px;
    text-align: center
}

.ap-input-number__decrease,
.ap-input-number__increase {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: 40px;
    height: auto;
    text-align: center;
    background: #f5f7fa;
    color: #606266;
    cursor: pointer;
    font-size: 13px
}

.ap-input-number__decrease:hover,
.ap-input-number__increase:hover {
    color: #409eff
}

.ap-input-number__decrease:hover:not(.is-disabled)~.ap-input .ap-input__inner:not(.is-disabled),
.ap-input-number__increase:hover:not(.is-disabled)~.ap-input .ap-input__inner:not(.is-disabled) {
    border-color: #409eff
}

.ap-input-number__decrease.is-disabled,
.ap-input-number__increase.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed
}

.ap-input-number__increase {
    right: 1px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #dcdfe6
}

.ap-input-number__decrease {
    left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid #dcdfe6
}

.ap-input-number.is-disabled .ap-input-number__decrease,
.ap-input-number.is-disabled .ap-input-number__increase {
    border-color: #e4e7ed;
    color: #e4e7ed
}

.ap-input-number.is-disabled .ap-input-number__decrease:hover,
.ap-input-number.is-disabled .ap-input-number__increase:hover {
    color: #e4e7ed;
    cursor: not-allowed
}

.ap-input-number--medium {
    width: 200px;
    line-height: 34px
}

.ap-input-number--medium .ap-input-number__decrease,
.ap-input-number--medium .ap-input-number__increase {
    width: 36px;
    font-size: 14px
}

.ap-input-number--medium .ap-input__inner {
    padding-left: 43px;
    padding-right: 43px
}

.ap-input-number--small {
    width: 130px;
    line-height: 30px
}

.ap-input-number--small .ap-input-number__decrease,
.ap-input-number--small .ap-input-number__increase {
    width: 32px;
    font-size: 13px
}

.ap-input-number--small .ap-input-number__decrease [class*=ap-icon],
.ap-input-number--small .ap-input-number__increase [class*=ap-icon] {
    transform: scale(.9)
}

.ap-input-number--small .ap-input__inner {
    padding-left: 39px;
    padding-right: 39px
}

.ap-input-number--mini {
    width: 130px;
    line-height: 26px
}

.ap-input-number--mini .ap-input-number__decrease,
.ap-input-number--mini .ap-input-number__increase {
    width: 28px;
    font-size: 12px
}

.ap-input-number--mini .ap-input-number__decrease [class*=ap-icon],
.ap-input-number--mini .ap-input-number__increase [class*=ap-icon] {
    transform: scale(.8)
}

.ap-input-number--mini .ap-input__inner {
    padding-left: 35px;
    padding-right: 35px
}

.ap-input-number.is-without-controls .ap-input__inner {
    padding-left: 15px;
    padding-right: 15px
}

.ap-input-number.is-controls-right .ap-input__inner {
    padding-left: 15px;
    padding-right: 50px
}

.ap-input-number.is-controls-right .ap-input-number__decrease,
.ap-input-number.is-controls-right .ap-input-number__increase {
    height: auto;
    line-height: 19px
}

.ap-input-number.is-controls-right .ap-input-number__decrease [class*=ap-icon],
.ap-input-number.is-controls-right .ap-input-number__increase [class*=ap-icon] {
    transform: scale(.8)
}

.ap-input-number.is-controls-right .ap-input-number__increase {
    border-radius: 0 4px 0 0;
    border-bottom: 1px solid #dcdfe6
}

.ap-input-number.is-controls-right .ap-input-number__decrease {
    right: 1px;
    bottom: 1px;
    top: auto;
    left: auto;
    border-right: none;
    border-left: 1px solid #dcdfe6;
    border-radius: 0 0 4px
}

.ap-input-number.is-controls-right[class*=medium] [class*=decrease],
.ap-input-number.is-controls-right[class*=medium] [class*=increase] {
    line-height: 17px
}

.ap-input-number.is-controls-right[class*=small] [class*=decrease],
.ap-input-number.is-controls-right[class*=small] [class*=increase] {
    line-height: 15px
}

.ap-input-number.is-controls-right[class*=mini] [class*=decrease],
.ap-input-number.is-controls-right[class*=mini] [class*=increase] {
    line-height: 13px
}

.ap-tooltip:focus:hover,
.ap-tooltip:focus:not(.focusing) {
    outline-width: 0
}

.ap-tooltip__popper {
    position: absolute;
    border-radius: 4px;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word
}

.ap-tooltip__popper .popper__arrow,
.ap-tooltip__popper .popper__arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.ap-tooltip__popper .popper__arrow {
    border-width: 6px
}

.ap-tooltip__popper .popper__arrow:after {
    content: " ";
    border-width: 5px
}

.ap-tooltip__popper[x-placement^=top] {
    margin-bottom: 12px
}

.ap-tooltip__popper[x-placement^=top] .popper__arrow {
    bottom: -6px;
    border-top-color: #303133;
    border-bottom-width: 0
}

.ap-tooltip__popper[x-placement^=top] .popper__arrow:after {
    bottom: 1px;
    margin-left: -5px;
    border-top-color: #303133;
    border-bottom-width: 0
}

.ap-tooltip__popper[x-placement^=bottom] {
    margin-top: 12px
}

.ap-tooltip__popper[x-placement^=bottom] .popper__arrow {
    top: -6px;
    border-top-width: 0;
    border-bottom-color: #303133
}

.ap-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #303133
}

.ap-tooltip__popper[x-placement^=right] {
    margin-left: 12px
}

.ap-tooltip__popper[x-placement^=right] .popper__arrow {
    left: -6px;
    border-right-color: #303133;
    border-left-width: 0
}

.ap-tooltip__popper[x-placement^=right] .popper__arrow:after {
    bottom: -5px;
    left: 1px;
    border-right-color: #303133;
    border-left-width: 0
}

.ap-tooltip__popper[x-placement^=left] {
    margin-right: 12px
}

.ap-tooltip__popper[x-placement^=left] .popper__arrow {
    right: -6px;
    border-right-width: 0;
    border-left-color: #303133
}

.ap-tooltip__popper[x-placement^=left] .popper__arrow:after {
    right: 1px;
    bottom: -5px;
    margin-left: -5px;
    border-right-width: 0;
    border-left-color: #303133
}

.ap-tooltip__popper.is-dark {
    background: #303133;
    color: #fff
}

.ap-tooltip__popper.is-light {
    background: #fff;
    border: 1px solid #303133
}

.ap-tooltip__popper.is-light[x-placement^=top] .popper__arrow {
    border-top-color: #303133
}

.ap-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after {
    border-top-color: #fff
}

.ap-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow {
    border-bottom-color: #303133
}

.ap-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color: #fff
}

.ap-tooltip__popper.is-light[x-placement^=left] .popper__arrow {
    border-left-color: #303133
}

.ap-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after {
    border-left-color: #fff
}

.ap-tooltip__popper.is-light[x-placement^=right] .popper__arrow {
    border-right-color: #303133
}

.ap-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after {
    border-right-color: #fff
}

.ap-slider:after,
.ap-slider:before {
    display: table;
    content: ""
}

.ap-slider__button-wrapper .ap-tooltip,
.ap-slider__button-wrapper:after {
    vertical-align: middle;
    display: inline-block
}

.ap-slider:after {
    clear: both
}

.ap-slider__runway {
    width: 100%;
    height: 6px;
    margin: 16px 0;
    background-color: #e4e7ed;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    vertical-align: middle
}

.ap-slider__runway.show-input {
    margin-right: 160px;
    width: auto
}

.ap-slider__runway.disabled {
    cursor: default
}

.ap-slider__runway.disabled .ap-slider__bar {
    background-color: #c0c4cc
}

.ap-slider__runway.disabled .ap-slider__button-wrapper.dragging,
.ap-slider__runway.disabled .ap-slider__button-wrapper.hover,
.ap-slider__runway.disabled .ap-slider__button-wrapper:hover {
    cursor: not-allowed
}

.ap-slider__runway.disabled .ap-slider__button.dragging,
.ap-slider__runway.disabled .ap-slider__button.hover,
.ap-slider__runway.disabled .ap-slider__button:hover {
    transform: scale(1);
    cursor: not-allowed
}

.ap-slider__button-wrapper,
.ap-slider__stop {
    -webkit-transform: translateX(-50%);
    position: absolute
}

.ap-slider__input {
    float: right;
    margin-top: 3px;
    width: 130px
}

.ap-slider__input.ap-input-number--mini {
    margin-top: 5px
}

.ap-slider__input.ap-input-number--medium {
    margin-top: 0
}

.ap-slider__input.ap-input-number--large {
    margin-top: -2px
}

.ap-slider__bar {
    height: 6px;
    background-color: #409eff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: absolute
}

.ap-slider__button-wrapper {
    height: 36px;
    width: 36px;
    z-index: 1001;
    top: -15px;
    transform: translateX(-50%);
    background-color: initial;
    text-align: center;
    user-select: none;
    line-height: normal
}

.ap-slider__button-wrapper:after {
    content: "";
    height: 100%
}

.ap-slider__button-wrapper.hover,
.ap-slider__button-wrapper:hover {
    cursor: grab
}

.ap-slider__button-wrapper.dragging {
    cursor: grabbing
}

.ap-slider__button {
    width: 16px;
    height: 16px;
    border: 2px solid #409eff;
    background-color: #fff;
    border-radius: 50%;
    transition: .2s;
    user-select: none
}

.ap-slider__button.dragging,
.ap-slider__button.hover,
.ap-slider__button:hover {
    transform: scale(1.2)
}

.ap-slider__button.hover,
.ap-slider__button:hover {
    cursor: grab
}

.ap-slider__button.dragging {
    cursor: grabbing
}

.ap-slider__stop {
    height: 6px;
    width: 6px;
    border-radius: 100%;
    background-color: #fff;
    transform: translateX(-50%)
}

.ap-slider__marks {
    top: 0;
    left: 12px;
    width: 18px;
    height: 100%
}

.ap-slider__marks-text {
    position: absolute;
    transform: translateX(-50%);
    font-size: 14px;
    color: #909399;
    margin-top: 15px
}

.ap-slider.is-vertical {
    position: relative
}

.ap-slider.is-vertical .ap-slider__runway {
    width: 6px;
    height: 100%;
    margin: 0 16px
}

.ap-slider.is-vertical .ap-slider__bar {
    width: 6px;
    height: auto;
    border-radius: 0 0 3px 3px
}

.ap-slider.is-vertical .ap-slider__button-wrapper {
    top: auto;
    left: -15px;
    transform: translateY(50%)
}

.ap-slider.is-vertical .ap-slider__stop {
    transform: translateY(50%)
}

.ap-slider.is-vertical.ap-slider--with-input {
    padding-bottom: 58px
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input {
    overflow: visible;
    float: none;
    position: absolute;
    bottom: 22px;
    width: 36px;
    margin-top: 15px
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input__inner {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input-number__decrease,
.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input-number__increase {
    top: 32px;
    margin-top: -1px;
    border: 1px solid #dcdfe6;
    line-height: 20px;
    box-sizing: border-box;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1)
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input-number__decrease {
    width: 18px;
    right: 18px;
    border-bottom-left-radius: 4px
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input-number__increase {
    width: 19px;
    border-bottom-right-radius: 4px
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input .ap-input-number__increase~.ap-input .ap-input__inner {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input:hover .ap-input-number__decrease,
.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input:hover .ap-input-number__increase {
    border-color: #c0c4cc
}

.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input:active .ap-input-number__decrease,
.ap-slider.is-vertical.ap-slider--with-input .ap-slider__input:active .ap-input-number__increase {
    border-color: #409eff
}

.ap-slider.is-vertical .ap-slider__marks-text {
    margin-top: 0;
    left: 15px;
    transform: translateY(50%)
}

.modal-app {
    position: fixed;
    background: rgba(107, 114, 128, .5);
    backdrop-filter: blur(24px) brightness(.7);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    color: #333;
    line-height: 40px;
    font-size: 20px
}

.modal-app .modal-content {
    display: flex;
    flex-direction: column;
    width: 780px;
    height: 580px;
    background: #fff;
    max-width: 90%;
    max-height: 95%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    text-align: left;
    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, .16)
}

.modal-app .modal-content ::-webkit-scrollbar {
    background: #eee;
    width: 5px;
    height: 5px
}

.modal-app .modal-content ::-webkit-scrollbar-thumb {
    background: #eee
}

@media screen and (max-width:2560px) {
    .modal-app .modal-content {
        transform: scale(1.4)
    }
}

@media screen and (max-width:1920px) {
    .modal-app .modal-content {
        transform: scale(1.3)
    }
}

@media screen and (max-width:1600px) {
    .modal-app .modal-content {
        transform: scale(1.2)
    }
}

@media screen and (max-width:1440px) {
    .modal-app .modal-content {
        transform: scale(1.1)
    }
}

@media screen and (max-width:1366px) {
    .modal-app .modal-content {
        transform: scale(1)
    }
}

.modal-app .modal-content .close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #333;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/close.09f85bdf.svg) 50%/30px no-repeat
}

.modal-app .top {
    height: 79.31%;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/bg3.8446deec.jpg) 50%/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 40px
}

.modal-app .top.bgeraser {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/picwish-bg.bf53ed6c.jpg) 50%/cover no-repeat
}

.modal-app .product {
    position: absolute;
    height: auto;
    top: 50%;
    transform: translateY(-50%)
}

.modal-app .product.rebg {
    width: 55.395%;
    right: -6.5%
}

.modal-app .product.watermask {
    width: 46.56%;
    right: 5%
}

.modal-app .left {
    width: 70%;
    position: relative;
    z-index: 1;
    margin-top: 24px
}

.modal-app .title {
    font-size: 24px;
    font-weight: 700;
    color: #55f;
    line-height: 30px;
    margin-bottom: 22px;
    margin-top: 6px
}

.modal-app .title:lang(zh) {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 32px
}

.modal-app .title:lang(pt) {
    white-space: nowrap
}

.modal-app ul {
    overflow: hidden;
    max-width: 370px;
    display: block
}

.modal-app ul.rebgul:lang(zh) li {
    width: 42%
}

.modal-app ul li {
    text-align: left;
    padding: 0;
    width: 100%;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 10px;
    font-weight: 400;
    color: #333;
    padding-left: 25px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/list3.2487c254.svg) left 3px/17px no-repeat
}

.modal-app ul li:lang(zh) {
    margin-bottom: 14px;
    line-height: 30px;
    width: 48%;
    float: left;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/list3.2487c254.svg) left 5px/17px no-repeat
}

.modal-app ul li:lang(zh):nth-child(3) {
    clear: both
}

.modal-app .software-box {
    display: flex;
    padding-left: 8px
}

.modal-app .software-box .item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.modal-app .software-box .item:first-child {
    margin-left: -8%
}

.modal-app .software-box .item:nth-child(2) {
    margin-left: -5%
}

.modal-app .software-box .item:lang(zh) {
    margin-top: 14px
}

.modal-app .software-box .item a {
    line-height: 0;
    padding: 48px 64px 24px 40px;
    border-radius: 50%
}

.modal-app .software-box .item .pic {
    position: relative;
    display: inline-block;
    line-height: 0
}

.modal-app .software-box .item .pic img {
    transition: all .2s;
    user-select: none;
    -webkit-user-select: none
}

.modal-app .software-box .item .pic i {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    pointer-events: none;
    transition: all .3s
}

.modal-app .software-box .item:first-child .pic {
    padding-top: 4px;
    padding-bottom: 2px
}

.modal-app .software-box .item:first-child .pic i {
    top: -24px;
    right: -31px;
    background: #4dabff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/download.a7411c26.svg) 50%/16px no-repeat
}

.modal-app .software-box .item:first-child:hover .pic i {
    left: 50%;
    top: 50%
}

.modal-app .software-box .item:nth-child(2) .pic {
    padding-top: 2px;
    display: flex
}

.modal-app .software-box .item:nth-child(2) .pic i {
    width: 150px;
    height: 150px;
    transform: translate(-20px, -86px) scale(.2);
    background: #333 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/code.9e86ae43.svg) 50%/60px no-repeat
}

.modal-app .software-box .item:nth-child(2):hover .pic i {
    background: #333 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/watermark-code.568bd33e.png) 50%/cover no-repeat;
    width: 150px;
    height: 150px;
    transform: translate(-30%, -32%)
}

.modal-app .software-box .item.android-item .pic {
    padding-top: 2px;
    display: flex
}

.modal-app .software-box .item.android-item .pic i {
    width: 150px;
    height: 150px;
    transform: translate(-24px, -86px) scale(.2);
    background: #83d160 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/code.9e86ae43.svg) 50%/60px no-repeat
}

.modal-app .software-box .item.android-item:hover .pic i {
    background: #83d160 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/picwish-android2.f383fa68.png) 50%/cover no-repeat;
    width: 150px;
    height: 150px;
    transform: translate(-32%, -35%)
}

.modal-app .software-box .item.ios-item {
    margin-left: -5%
}

.modal-app .software-box .item.ios-item .pic {
    padding-top: 2px;
    display: flex
}

.modal-app .software-box .item.ios-item .pic i {
    width: 150px;
    height: 150px;
    transform: translate(-24px, -86px) scale(.2);
    background: #333 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/code.9e86ae43.svg) 50%/60px no-repeat
}

.modal-app .software-box .item.ios-item:hover .pic i {
    background: #333 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/picwish-ios2.ef027587.png) 50%/cover no-repeat;
    width: 150px;
    height: 150px;
    transform: translate(-32%, -35%)
}

.modal-app .software-box .item.remove-item {
    padding: 48px 64px 24px 40px;
    border-radius: 50%
}

.modal-app .software-box .item .txt {
    transition: all .2s;
    font-size: 11px;
    color: #333;
    line-height: 22px;
    margin-top: 2px;
    white-space: nowrap
}

.modal-app .software-box .item:hover {
    cursor: pointer
}

.modal-app .software-box .item:hover .pic img {
    transform: scale(0)
}

.modal-app .software-box .item:hover .pic i {
    transform: translate(-10%, -50%) scale(5)
}

.modal-app .software-box .item:hover .txt {
    transform: scale(0)
}

.modal-app .software-box .item2 {
    max-width: 100px;
    margin-top: 30px
}

.modal-app .software-box .item2:first-child,
.modal-app .software-box .item2:nth-child(2) {
    margin-right: 40px
}

.modal-app .software-box .item2 .google {
    width: 60px;
    height: 60px;
    background: #009788 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/google.3678ba69.svg) 19px 15px/27px no-repeat;
    border-radius: 50%
}

.modal-app .software-box .item2 .apple {
    width: 60px;
    height: 60px;
    background: #000 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/apple.4958c13a.svg) 50%/26px no-repeat;
    border-radius: 50%
}

.modal-app .software-box .item2 .windows {
    width: 60px;
    height: 60px;
    background: #4dabff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/picwish-pc-white.5cbe85ec.svg) center 21px/27px no-repeat;
    border-radius: 50%
}

.modal-app .software-box .item2 .txt {
    transition: all .2s;
    font-size: 14px;
    color: #333;
    line-height: 26px;
    margin-top: 2px;
    white-space: nowrap
}

.modal-app .software-box .item2 a {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column
}

.modal-app .software-box .item2 a:hover {
    cursor: pointer;
    text-decoration: none
}

.modal-app .software-box .item2 a:hover .code {
    opacity: 1
}

.modal-app .software-box .item2 a:hover .windows {
    background: #4dabff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/download.a7411c26.svg) 50%/28px no-repeat
}

.modal-app .software-box .item2 .code {
    position: absolute;
    opacity: 0;
    top: -99px;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 90px;
    background: #fff;
    box-shadow: 0 4px 7px 0 rgba(124, 118, 162, .31);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-app .software-box .item2 .code .wechat {
    width: 80px;
    height: 80px;
    padding: 2px;
    background: #333 url(https://qncdn.aoscdn.com/projects/picwish/assets/img/picwish-code.93ed587e.png) 50%/76px no-repeat
}

.modal-app .software-box .item2 .code:before {
    content: "";
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid #fff;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: -4px
}

.modal-app .bottom {
    padding: 31px 15.5% 28px
}

.modal-app .bottom .doing {
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: #666
}

.modal-app .bottom .processing {
    display: flex;
    align-items: center
}

.modal-app .bottom .processing .process-status {
    flex: 1;
    height: 6px;
    background: #f3f3f3;
    opacity: .6;
    border-radius: 3px
}

.modal-app .bottom .processing .process-width {
    overflow: hidden;
    position: relative;
    height: 6px;
    width: 0;
    background: linear-gradient(90deg, #535dff, #44abff);
    opacity: .6;
    border-radius: 3px;
    transition: all .3s linear
}

.modal-app .bottom .processing .process-num {
    width: 36px;
    text-align: right;
    font-size: 13px;
    line-height: 30px;
    font-weight: 400;
    color: #989898
}

@media screen and (max-height:800px) {
    .modal-app .modal-content {
        height: auto
    }

    .modal-app .modal-content:lang(zh) {
        height: 520px
    }

    .modal-app .top {
        height: 84.6%
    }

    .modal-app .title {
        margin-bottom: 16px
    }

    .modal-app ul li {
        margin-bottom: 8px
    }

    .modal-app .item {
        margin-top: -6px
    }

    .modal-app .bottom {
        padding: 20px 15.5% 16px
    }

    .modal-app .bottom .doing {
        margin-bottom: -8px
    }
}

@media screen and (max-width:768px) {
    .modal-app .modal-content {
        background: none;
        height: auto;
        box-shadow: none;
        overflow: unset
    }

    .modal-app .modal-content:lang(zh) {
        height: auto
    }

    .modal-app .modal-content .close {
        top: 10px;
        right: 10px;
        background-size: 20px;
        width: 20px;
        height: 20px
    }

    .modal-app .top {
        height: auto;
        padding: 25px 7% 35px;
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .16);
        border-radius: 10px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/app-bg.bfc8ca4e.jpg) 50%/cover no-repeat !important
    }

    .modal-app .top .left {
        width: 100%;
        margin-top: 0
    }

    .modal-app .top a {
        width: 260px;
        max-width: 90%;
        height: 50px;
        line-height: 50px;
        background: linear-gradient(-90deg, #535dff, #44abff);
        border-radius: 25px;
        font-size: 23px;
        font-weight: 700;
        color: #fff;
        display: block;
        margin: 20px auto 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .modal-app .top a:lang(zh) {
        letter-spacing: 2.5px;
        margin: 40px auto 0
    }

    .modal-app .top a:after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 8px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow.cceb2f4a.svg) 50%/20px no-repeat
    }

    .modal-app .title {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 22px
    }

    .modal-app .title:lang(zh) {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center
    }

    .modal-app .product.rebg {
        width: 45.645%;
        right: -3.5%
    }

    .modal-app .product.rebg:lang(zh) {
        top: 45%;
        right: 3%
    }

    .modal-app .product.watermask {
        width: 38.86%;
        right: 3%;
        top: 47.5%
    }

    .modal-app .product.watermask:lang(zh) {
        width: 58.5%;
        top: 45%
    }

    .modal-app .eraser-ul {
        padding-left: 3%
    }

    .modal-app ul li {
        max-width: 202px;
        padding-left: 18px;
        background-size: 13px !important;
        font-size: 14px;
        line-height: 20px
    }

    .modal-app ul li:lang(zh) {
        padding-left: 22px;
        font-size: 14px;
        line-height: 28px;
        float: none;
        margin-bottom: 0;
        background-position-y: 8px
    }

    .modal-app .bottom {
        margin-top: 15px;
        padding: 18px 15.5% 23px;
        background: #fff;
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .16);
        border-radius: 10px
    }

    .modal-app .bottom .doing {
        font-size: 12px;
        font-weight: 400;
        color: #666;
        margin-bottom: 1px
    }

    .modal-app .bottom .process-num {
        display: inline-block;
        min-width: 25px;
        text-align: left
    }

    .modal-app .bottom .processing .process-status {
        height: 3px;
        border-radius: 2px;
        opacity: 1
    }

    .modal-app .bottom .processing .process-width {
        opacity: 1;
        height: 3px;
        background: linear-gradient(-90deg, #535dff, #44abff);
        border-radius: 2px
    }
}

.section-partners {
    margin-top: -20px;
    padding-top: 68px;
    position: relative;
    background: #f7f7f7;
    overflow: hidden
}

.section-partners h2 {
    margin-bottom: .6em
}

.section-partners h2 span {
    color: #55f;
    font-family: Source Han Sans CN;
    font-weight: 700
}

.section-partners .desc {
    font-size: 15px;
    color: #333;
    line-height: 27px;
    margin-bottom: 1em
}

.section-partners .container {
    width: 1384px;
    margin: 0 auto;
    max-width: 86.67%
}

.section-partners .swiper {
    position: relative
}

.section-partners .swiper .swiper-box {
    padding: 32px 28px 60px;
    overflow: hidden
}

.section-partners .swiper .swiper-box .swiper-item-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item {
    width: 31.6%;
    margin-right: 2.6%;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 9px 27px 0 hsla(0, 0%, 86.7%, .79);
    border-radius: 8px;
    transition: all .3s ease-in-out;
    flex: 1 0 auto;
    position: relative
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item.is-hidden,
.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:nth-child(4) {
    opacity: 0
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item.is-visible {
    opacity: 1
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item.is-active {
    opacity: 1 !important;
    z-index: 2
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:before {
    position: absolute;
    left: 18px;
    top: 13px;
    content: "";
    width: 30px;
    height: 27px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/douhao.b959e49f.png) 50%/30px no-repeat
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div {
    padding: 35px 9% 82px;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: relative
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .title {
    text-align: left;
    padding: 11px 0 36px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666;
    line-height: 26px
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .title a {
    color: #aaa;
    display: inline-block
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .title a:hover {
    color: #55f
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user {
    display: flex;
    position: absolute;
    bottom: 37px;
    width: 100%
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .left {
    position: relative;
    line-height: 0
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .left .logoicon {
    position: absolute;
    width: 24px;
    height: 24px;
    left: -10px;
    top: -10px
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .left .pic {
    width: 46px;
    height: 46px;
    border-radius: 8px
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .right {
    text-align: left;
    margin-left: 13px
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .right .name {
    font-size: 16px;
    font-family: Poppins SemiBold;
    font-weight: 700;
    color: #000;
    line-height: 18px;
    margin: 5px 0
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .right .identity {
    font-size: 16px;
    font-family: Poppins Light;
    font-weight: 400;
    color: #999;
    line-height: 18px
}

.section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:hover {
    box-shadow: 0 9px 27px 0 hsla(0, 0%, 86.7%, .89)
}

.section-partners .swiper .swiper-btn {
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: absolute;
    top: 40%;
    z-index: 9;
    background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow-gray.15b07a6d.svg) 50%/7px no-repeat;
    user-select: none
}

.section-partners .swiper .swiper-btn:hover {
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow-blue.5eb62974.svg)
}

.section-partners .swiper .button-prev {
    left: -48px;
    transform: rotate(180deg);
    box-shadow: 0 -3px 13px 0 hsla(0, 0%, 85.1%, .5)
}

.section-partners .swiper .button-prev.is-hidden {
    cursor: unset
}

.section-partners .swiper .button-prev.is-hidden:hover {
    background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow-gray.15b07a6d.svg) 50%/7px no-repeat
}

.section-partners .swiper .button-next {
    right: -48px;
    box-shadow: 0 3px 13px 0 hsla(0, 0%, 85.1%, .5)
}

.section-partners .swiper .button-next.is-hidden {
    cursor: unset
}

.section-partners .swiper .button-next.is-hidden:hover {
    background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow-gray.15b07a6d.svg) 50%/7px no-repeat
}

.section-partners .swiper .indicators {
    display: none
}

.section-partners .partners {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden
}

.section-partners .partners:before {
    position: absolute;
    z-index: 1;
    left: 0;
    top: -36px;
    content: "";
    width: 23.958%;
    height: 249px;
    background: linear-gradient(-90deg, hsla(0, 0%, 96.9%, 0), #f7f7f7)
}

.section-partners .partners:after {
    position: absolute;
    right: 0;
    top: -36px;
    content: "";
    width: 23.958%;
    height: 249px;
    background: linear-gradient(90deg, hsla(0, 0%, 96.9%, 0), hsla(0, 0%, 96.9%, .99) 99%)
}

.section-partners .partner1,
.section-partners .partner2 {
    position: absolute;
    width: 4237px;
    height: 80px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/partner1.c24c1150.png) 0/auto 80px repeat-x;
    animation: bgzou 166s linear infinite forwards
}

.section-partners .partner2 {
    width: 4237px;
    top: 100px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/partner2.39bff1e4.png) 0/auto 80px repeat-x;
    animation: bgzou2 175s linear infinite forwards
}

@keyframes bgzou {
    to {
        background-position: 4237px 0
    }
}

@keyframes bgzou2 {
    to {
        background-position: -4237px 0
    }
}

@keyframes bgzou3 {
    to {
        background-position: 1004px 0
    }
}

@keyframes bgzou4 {
    to {
        background-position: -1115px 0
    }
}

.section-partners .tips {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #aaa;
    line-height: 27px;
    padding: 50px 0 25px
}

@media(max-width:768px) {
    .section-partners {
        padding-top: 60px
    }

    .section-partners .swiper .swiper-box {
        padding: 32px 15px 15px;
        overflow: unset
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item {
        width: 100%;
        margin-right: 0
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:nth-child(n+2) {
        opacity: 0
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:before {
        position: absolute;
        left: -105%;
        top: 10%;
        content: "";
        width: 100%;
        height: 80%;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 9px 27px 0 hsla(0, 0%, 86.7%, .79);
        border-radius: 8px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:first-child:before {
        display: none
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:after {
        position: absolute;
        left: 105%;
        top: 10%;
        content: "";
        width: 100%;
        height: 80%;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 9px 27px 0 hsla(0, 0%, 86.7%, .79);
        border-radius: 8px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item:last-of-type:after {
        display: none
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div {
        padding: 15px 6% 57px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .title {
        line-height: 24px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user {
        bottom: 28px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .left .pic {
        width: 40px;
        height: 40px;
        border-radius: 4px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .right .name {
        margin: 4px 0 1px
    }

    .section-partners .swiper .swiper-box .swiper-item-wrapper .swiper-item>div .user .right .identity {
        font-size: 12px
    }

    .section-partners .swiper .indicators {
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
        margin-bottom: 30px
    }

    .section-partners .swiper .indicators li {
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #55f;
        opacity: .2;
        border-radius: 50%;
        margin: 0 5px
    }

    .section-partners .swiper .indicators li.active {
        opacity: 1
    }

    .section-partners .button-next,
    .section-partners .button-prev {
        display: none
    }

    .section-partners .partners {
        height: 140px
    }

    .section-partners .partners:after,
    .section-partners .partners:before {
        display: none
    }

    .section-partners .partner1,
    .section-partners .partner2 {
        height: 40px;
        width: 993px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/partner-m1.079267d0.png) 0/auto 40px repeat-x;
        animation: bgzou3 30s linear infinite forwards
    }

    .section-partners .partner2 {
        top: 50px;
        width: 993px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/partner-m2.c0eb4d32.png) 0/auto 40px repeat-x;
        animation: bgzou4 40s linear infinite forwards
    }

    .section-partners .partner3 {
        position: absolute;
        top: 100px;
        width: 1004px;
        height: 40px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/partner-m3.feb0a385.png) 0/auto 40px repeat-x;
        animation: bgzou3 35s linear infinite forwards
    }

    .section-partners .tips {
        font-size: 10px;
        padding: 38px 0 15px
    }
}

html {
    touch-action: none;
    touch-action: pan-y
}

section {
    text-align: center;
    line-height: 1.5
}

section a:hover {
    text-decoration: none
}

.mask {
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 45px;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    color: #fff
}

.mask span {
    pointer-events: none
}

.mask span:nth-child(2) {
    font-size: 25px
}

.mask_custom {
    border-radius: 12px
}

.mask_custom .ap-message-box__btns .ap-button {
    min-width: 98px;
    border-radius: 71px
}

.wrapper {
    width: 1200px
}

a.btn-white,
a.btn-white p,
a.upload p,
div.title,
h1,
h2 {
    font-family: Poppins SemiBold;
    font-weight: 600
}

p.dec {
    font-family: Poppins;
    font-weight: 400 !important
}

.api-banner p,
.easy-use p {
    font-family: Poppins Light;
    font-weight: 300
}

a.more,
div.dec,
div.text,
h3 {
    font-family: Poppins;
    font-weight: 400
}

body:lang(ja) h1,
body:lang(ja) h2,
body:lang(ja) h3,
body:lang(tw) h1,
body:lang(tw) h2,
body:lang(tw) h3,
body:lang(zh) h1,
body:lang(zh) h2,
body:lang(zh) h3 {
    font-family: Source Han Sans CN Bold;
    font-weight: 700
}

body:lang(ja) .main p.dec,
body:lang(tw) .main p.dec,
body:lang(zh) .main p.dec {
    font-family: Source Han Sans CN;
    font-weight: 400
}

body:lang(ja) .use-step div.title,
body:lang(tw) .use-step div.title,
body:lang(zh) .use-step div.title {
    font-family: Source Han Sans CN Bold;
    font-weight: 700
}

body:lang(ja) .easy-use p,
body:lang(ja) div.dec,
body:lang(ja) div.text,
body:lang(tw) .easy-use p,
body:lang(tw) div.dec,
body:lang(tw) div.text,
body:lang(zh) .easy-use p,
body:lang(zh) div.dec,
body:lang(zh) div.text {
    font-family: Source Han Sans CN;
    font-weight: 400
}

body:lang(ja) .btn-white p,
body:lang(ja) .upload p,
body:lang(tw) .btn-white p,
body:lang(tw) .upload p,
body:lang(zh) .btn-white p,
body:lang(zh) .upload p {
    font-family: Source Han Sans CN Bold;
    font-weight: 700
}

body:lang(ja) .pro-function a.more,
body:lang(ja) .pro-function h3.title,
body:lang(tw) .pro-function a.more,
body:lang(tw) .pro-function h3.title,
body:lang(zh) .pro-function a.more,
body:lang(zh) .pro-function h3.title {
    font-family: Source Han Sans CN;
    font-weight: 400
}

body:lang(ja) .api-banner a,
body:lang(tw) .api-banner a,
body:lang(zh) .api-banner a {
    font-family: Source Han Sans CN Bold;
    font-weight: 700
}

body:lang(ja) .api-banner p,
body:lang(tw) .api-banner p,
body:lang(zh) .api-banner p {
    font-family: Source Han Sans CN;
    font-weight: 400
}

h2 {
    font-size: 28px;
    color: #333;
    line-height: 36px;
    line-height: 38px
}

@media screen and (max-width:768px) {
    h2 {
        font-size: 26px;
        line-height: 36px !important
    }
}

.btn-white {
    margin: 0 auto;
    display: table;
    text-align: center;
    position: relative;
    min-width: 260px;
    line-height: 54px;
    border: 3px solid #fff;
    border-radius: 30px;
    font-size: 18px;
    color: #fff
}

.btn-white:hover {
    color: #6059f7;
    background: #fff;
    text-decoration: none;
    cursor: pointer
}

.ap-image {
    position: relative;
    display: inline-block;
    overflow: hidden
}

.ap-image img {
    width: 100%;
    height: auto
}

.main {
    width: 100%;
    height: 100vh;
    min-height: 660px;
    max-height: 860px;
    padding: 128px 0 30px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/bg.67198a8e.jpg) bottom/cover no-repeat;
    display: flex;
    align-items: center
}

@media screen and (max-width:768px) {
    .main {
        position: relative;
        min-height: 100vh;
        height: auto;
        padding: 88px 0 30px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/bg2.295041c5.jpg) bottom/cover no-repeat
    }

    .main:after {
        content: "";
        position: absolute;
        right: -15%;
        top: 0;
        width: 230px;
        height: 220px;
        background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/dot-blue.5af1082f.png) 100% 0/60% auto no-repeat
    }
}

.main .wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 1
}

.main .left {
    position: relative;
    color: #fff;
    width: 43%;
    max-width: 500px;
    text-align: left
}

.main .left:lang(zh) {
    width: 40%
}

@media screen and (max-width:1359px) {
    .main .left {
        width: 45%;
        max-width: 455px
    }
}

@media screen and (max-width:768px) {
    .main .left {
        width: 100%;
        max-width: unset;
        text-align: center
    }

    .main .left:lang(zh) {
        width: 100%
    }
}

.main .left h1 {
    font-size: 48px;
    line-height: 72px;
    color: #000;
    position: relative;
    margin: 0
}

.main .left h1:lang(zh) {
    font-size: 56px;
    line-height: 82px
}

@media screen and (max-width:1470px) {
    .main .left h1 {
        font-size: 44px;
        line-height: 66px
    }
}

@media screen and (max-width:1366px) {
    .main .left h1:lang(zh) {
        font-size: 52px;
        line-height: 78px
    }
}

@media screen and (max-width:1240px) {
    .main .left h1 {
        font-size: 40px;
        line-height: 60px
    }

    .main .left h1:lang(zh) {
        font-size: 46px;
        line-height: 70px
    }
}

@media screen and (max-width:1120px) {
    .main .left h1 {
        font-size: 36px;
        line-height: 56px
    }
}

@media screen and (max-width:768px) {
    .main .left h1 {
        font-size: 30px;
        margin-bottom: 10px;
        line-height: 44px
    }

    .main .left h1:lang(zh) {
        font-size: 30px;
        line-height: 44px;
        max-width: 260px;
        margin: 0 auto
    }
}

@media screen and (max-width:335px) {
    .main .left h1 {
        font-size: 26px;
        line-height: 36px
    }
}

.main .left .dec {
    font-size: 22px;
    line-height: 33px;
    color: #000;
    margin: 32px 0 48px;
    margin: 35px 0 42px;
    max-width: 450px
}

.main .left .dec:lang(zh) {
    font-size: 24px;
    line-height: 44px;
    margin: 52px 0 68px
}

@media screen and (max-width:1280px) {
    .main .left .dec:lang(zh) {
        font-size: 20px;
        line-height: 36px;
        margin: 32px 0 48px
    }
}

@media screen and (max-width:1240px) {
    .main .left .dec {
        max-width: 93%
    }

    .main .left .dec:lang(zh) {
        margin: 32px 0 48px
    }
}

@media screen and (max-width:1200px) {
    .main .left .dec {
        font-size: 18px;
        line-height: 30px
    }
}

@media screen and (max-width:1040px) {
    .main .left .dec {
        max-width: 98%
    }
}

@media screen and (max-width:768px) {
    .main .left .dec {
        max-width: 100%;
        font-weight: 400 !important
    }

    .main .left .dec,
    .main .left .dec:lang(zh) {
        font-size: 16px;
        line-height: 30px;
        margin: 24px 0 40px
    }
}

.main .left .drop {
    width: 240px;
    margin-top: 5px;
    font-size: 18px;
    color: #666;
    opacity: .77;
    text-align: center
}

@media(max-width:768px) {
    .main .left .drop {
        display: none
    }
}

.main .right {
    width: 55%;
    line-height: 0
}

@media screen and (max-width:1359px) {
    .main .right {
        width: 52%
    }
}

.main .right img {
    width: 113.35%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 14px 43px 0 rgba(15, 96, 134, .35)
}

@media screen and (max-width:768px) {
    .main .right {
        width: 88%;
        margin: 40px auto 0
    }

    .main .right img {
        width: 100%;
        border-radius: 8px
    }
}

.main .upload {
    position: relative;
    text-align: center;
    min-width: 240px;
    background: #5455ff;
    border-radius: 30px;
    display: inline-block;
    overflow: hidden;
    transform: rotate(0deg);
    transform: translateY(0);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s
}

@media screen and (max-width:768px) {
    .main .upload {
        min-width: 260px;
        margin: 0 auto
    }

    .main .upload:nth-of-type(2) {
        margin-top: 20px
    }
}

.main .upload p {
    font-size: 20px;
    line-height: 60px;
    color: #fff;
    display: block;
    position: relative;
    padding: 0 20px 0
}

.main .upload .move-bg {
    position: absolute;
    height: 60px;
    width: 480px;
    left: -240px;
    top: 0;
    transform: translateZ(0);
    transition: all .3s cubic-bezier(.25, .46, .45, .94)
}

.main .upload .move-bg .bg-color-left {
    position: relative;
    float: left;
    height: 60px;
    width: 240px;
    background: linear-gradient(270deg, #3babff, #55f)
}

.main .upload .move-bg .bg-color-right {
    position: relative;
    float: left;
    height: 60px;
    width: 240px;
    background: linear-gradient(90deg, #3babff, #55f)
}

.main .upload:hover {
    transform: translateZ(0) translateY(-5px)
}

.main .upload:hover .move-bg {
    transition: all .3s cubic-bezier(.55, .085, .68, .53);
    transform: translateZ(0) translateX(240px)
}

.main .upload:hover {
    background: #3f3fff;
    transform: translateY(-4px)
}

@keyframes afterCricle {
    0% {
        opacity: .3
    }

    40% {
        opacity: .5;
        box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1), 0 0 1px 2px hsla(0, 0%, 100%, .5)
    }

    to {
        box-shadow: 0 0 0 2px hsla(0, 0%, 100%, .1), 0 0 1px 2px hsla(0, 0%, 100%, .5);
        transform: scale(1.4);
        opacity: 0
    }
}

.use-step {
    padding: 76px 0 60px
}

@media screen and (max-width:768px) {
    .use-step {
        padding: 60px 0 0
    }
}

.use-step ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 85px
}

@media screen and (max-width:768px) {
    .use-step ul {
        margin-top: 65px
    }
}

.use-step li {
    width: 31.117%;
    background: #fff;
    box-shadow: 0 0 32px 0 #ecf0f5;
    border-radius: 12px;
    padding-bottom: 36px
}

@media screen and (max-width:768px) {
    .use-step li {
        width: 100%;
        margin-bottom: 50px
    }
}

.use-step li .num {
    width: 64px;
    height: 64px;
    margin: -32px auto 0;
    border-radius: 50%
}

@media screen and (max-width:768px) {
    .use-step li .num {
        width: 34px;
        height: 34px;
        margin: -17px auto 0
    }
}

.use-step li .num:first-child {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/one.7e55f1ab.png) 50%/cover no-repeat
}

.use-step li .num.two {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/two.cfe5352d.png) 50%/cover no-repeat
}

.use-step li .num.three {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/three.b28838a1.png) 50%/cover no-repeat
}

.use-step li .title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 27px;
    margin-bottom: 15px;
    line-height: 34px;
    color: #333
}

.use-step li .dec {
    font-size: 15px;
    font-weight: 400;
    color: #666;
    line-height: 27px;
    width: 258px;
    width: 250px;
    max-width: 94%;
    margin: 0 auto
}

.use-step li .dec.dectab {
    width: 280px
}

.easy-use {
    position: relative;
    padding: 0 0 80px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5
}

@media screen and (max-width:768px) {
    .easy-use {
        padding: 0 0 30px;
        font-size: 16px
    }
}

.easy-use .easy-tiem {
    text-align: left;
    padding: 80px 0 80px
}

.easy-use .easy-tiem:nth-child(2) {
    background: #f8f8f8
}

.easy-use .easy-tiem>.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.easy-use .easy-tiem>.wrapper:after {
    display: none
}

.easy-use .easy-tiem:first-child>.wrapper,
.easy-use .easy-tiem:nth-child(3)>.wrapper {
    flex-direction: row-reverse
}

.easy-use .easy-tiem h2 {
    margin-bottom: 45px;
    margin-bottom: 36px
}

.easy-use .easy-tiem .left {
    width: 42.7%
}

.easy-use .easy-tiem .left p {
    color: #666;
    font-size: 16px;
    line-height: 38px;
    font-size: 17px;
    line-height: 28px
}

.easy-use .easy-tiem .right {
    width: 51.5%
}

.easy-use .easy-tiem .right .paint {
    position: relative;
    overflow: hidden;
    line-height: 0;
    max-width: 618px;
    margin: 0 auto
}

.easy-use .easy-tiem .right .paint .text {
    position: absolute;
    bottom: 26px;
    min-width: 80px;
    text-align: center;
    padding: 0 10px;
    line-height: 36px;
    background: rgba(0, 0, 0, .5);
    border-radius: 6px;
    font-size: 16px;
    color: #fff
}

.easy-use .easy-tiem .right .paint .text.ml {
    left: 30px
}

.easy-use .easy-tiem .right .paint .text.mr {
    right: 30px
}

@media screen and (max-width:768px) {
    .easy-use .easy-tiem .right .paint .text {
        bottom: 10px
    }

    .easy-use .easy-tiem .right .paint .text.ml {
        left: 10px
    }

    .easy-use .easy-tiem .right .paint .text.mr {
        right: 10px
    }
}

.easy-use .easy-tiem .right .ap-image {
    width: 100%;
    height: 100%
}

.easy-use .easy-tiem .right .ap-image img {
    border-radius: 12px
}

.easy-use .easy-tiem .right .magicbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    display: flex;
    overflow: hidden
}

.easy-use .easy-tiem .right .before {
    overflow: hidden;
    position: relative;
    width: 50%;
    height: 100%;
    background: #fff;
    float: left
}

.easy-use .easy-tiem .right .before img {
    position: absolute;
    display: block;
    height: 100%;
    width: auto;
    top: 0;
    left: 0
}

.easy-use .easy-tiem .right .resize {
    cursor: col-resize;
    float: left;
    position: absolute;
    left: 50%;
    width: 37px;
    margin-left: -18.5px;
    height: 100%;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/line.0d673869.png) 50%/100% auto no-repeat
}

.easy-use .easy-tiem .right .resize:hover {
    color: #444
}

.easy-use .easy-tiem .right .after {
    float: left;
    width: 0;
    height: 100%;
    background: #fff;
    box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, .11)
}

@media screen and (max-width:768px) {
    .easy-use .easy-tiem {
        padding: 60px 0 60px
    }

    .easy-use .easy-tiem:first-child {
        padding: 20px 0 60px
    }

    .easy-use .easy-tiem>.wrapper {
        display: block
    }

    .easy-use .easy-tiem h2 {
        margin-bottom: 30px
    }

    .easy-use .easy-tiem .left {
        margin-bottom: 30px;
        width: 100%
    }

    .easy-use .easy-tiem .left p {
        line-height: 30px
    }

    .easy-use .easy-tiem .right {
        width: 100%
    }
}

.trynow {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/middle-banner.2141f047.jpg) top/cover no-repeat;
    padding: 56px 0 54px
}

@media screen and (max-width:768px) {
    .trynow {
        margin-top: -20px
    }
}

.trynow h2 {
    color: #000;
    line-height: 47px;
    max-width: 690px;
    margin: 0 auto 42px
}

.trynow .btn-white {
    min-width: 151px;
    height: 50px;
    line-height: unset;
    border-radius: 25px;
    transform: translateY(0);
    transition: all .3s ease-in-out;
    border: unset;
    background: #6059f7;
    overflow: hidden;
    transform: rotate(0deg);
    position: relative
}

.trynow .btn-white p {
    font-size: 18px;
    color: #fff;
    line-height: 50px;
    display: block;
    margin: unset;
    padding: 0 20px 0;
    position: relative
}

.trynow .btn-white .move-bg {
    position: absolute;
    height: 50px;
    width: 450px;
    left: -225px;
    top: 0;
    transform: translateZ(0);
    transition: all .3s cubic-bezier(.25, .46, .45, .94)
}

.trynow .btn-white .move-bg .bg-color-left {
    position: relative;
    float: left;
    height: 50px;
    width: 225px;
    background: linear-gradient(270deg, #3babff, #55f)
}

.trynow .btn-white .move-bg .bg-color-right {
    position: relative;
    float: left;
    height: 50px;
    width: 225px;
    background: linear-gradient(90deg, #3babff, #55f)
}

.trynow .btn-white:hover {
    transform: translateZ(0) translateY(-5px)
}

.trynow .btn-white:hover .move-bg {
    transition: all .3s cubic-bezier(.55, .085, .68, .53);
    transform: translateZ(0) translateX(225px)
}

.trynow .btn-white:after {
    display: none
}

.trynow .btn-white:hover {
    background: #4c4df9;
    transform: translateY(-4px)
}

.pro-function {
    padding: 118px 0 164px !important;
    position: relative
}

@media screen and (max-width:768px) {
    .pro-function {
        padding: 60px 0 0 !important
    }
}

.pro-function h2 {
    line-height: 50px
}

.pro-function ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 60px
}

@media screen and (max-width:768px) {
    .pro-function ul {
        margin-top: 40px
    }
}

.pro-function li {
    width: 31.177%;
    position: relative;
    margin-bottom: 26px;
    background: #fff;
    border: 1px solid #ebebfa;
    border-radius: 12px;
    text-align: left;
    overflow: hidden
}

.pro-function li:hover {
    box-shadow: 0 9px 38px 0 hsla(0, 0%, 90.6%, .89);
    border: none
}

.pro-function li .ap-image {
    width: 100%;
    height: 249px
}

.pro-function li img {
    height: auto;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media screen and (max-width:768px) {
    .pro-function li {
        width: 100%
    }

    .pro-function li:last-child {
        margin-bottom: 0
    }

    .pro-function li img {
        height: 100%;
        object-fit: cover
    }
}

.pro-function li .title {
    font-size: 20px;
    font-size: 18px;
    line-height: 30px;
    color: #000;
    padding: 20px 7% 14px;
    padding: 8px 5% 16px
}

@media screen and (max-width:768px) {
    .pro-function li .title {
        font-size: 18px;
        line-height: 26px;
        padding: 10px 6% 6px
    }
}

.pro-function li .dec {
    padding: 0 7% 35px;
    font-size: 16px;
    color: #999;
    line-height: 28px
}

@media screen and (max-width:768px) {
    .pro-function li .dec {
        font-size: 16px;
        line-height: 24px;
        padding: 0 6% 26px
    }
}

.pro-function .more {
    float: right;
    margin-right: 20px;
    padding-right: 36px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow.78b2b9f0.svg) 100%/25px no-repeat;
    font-size: 18px;
    color: #333;
    display: block
}

@media screen and (max-width:768px) {
    .pro-function .more {
        margin-top: 26px
    }
}

.pro-function .more:hover {
    color: #55f;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow-blue.f04c8984.svg) 100%/25px no-repeat
}

.api-banner {
    padding-bottom: 150px
}

.api-banner .wrapper {
    background: linear-gradient(90deg, #55f, #64a9ff);
    border-radius: 30px;
    width: 1415px;
    min-height: 260px;
    max-width: 86.67%;
    padding: 38px 133px 40px 107px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (max-width:1599px) {
    .api-banner .wrapper {
        padding: 38px 6.927% 40px 5.573%
    }
}

.api-banner .wrapper .bantext {
    width: 73%;
    padding-right: 6%
}

.api-banner .wrapper .bantext h2 {
    font-size: 28px;
    color: #fff;
    line-height: 36px;
    text-align: left
}

.api-banner .wrapper .bantext p {
    font-size: 17px;
    color: #fff;
    line-height: 30px;
    opacity: .7;
    text-align: left;
    padding-top: 25px
}

.api-banner .wrapper .banbtn a {
    display: block;
    min-width: 165px;
    padding: 0 30px;
    line-height: 44px;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 25px;
    font-size: 18px;
    color: #629fff;
    transition: all .3s ease-in-out
}

.api-banner .wrapper .banbtn a:hover {
    transform: translateY(-4px)
}

.api-banner .wrapper .banbtn a:after {
    display: none
}

@media screen and (max-width:768px) {
    .api-banner {
        padding-bottom: 86px
    }

    .api-banner .wrapper {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 56px 10% 80px
    }

    .api-banner .wrapper .bantext {
        width: 100%;
        margin-bottom: 58px
    }

    .api-banner .wrapper .bantext h2 {
        font-size: 23px;
        line-height: 30px
    }

    .api-banner .wrapper .bantext p {
        font-size: 16px;
        line-height: 26px;
        padding-top: 6.93333vw
    }
}

.interest {
    padding-bottom: 109px;
    padding-top: 95px
}

@media screen and (max-width:768px) {
    .interest {
        padding: 70px 0 65px
    }
}

.interest .wrapper {
    border-radius: 12px;
    width: 1359px;
    max-width: 90%;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/api-bg.38166b43.jpg) top/cover no-repeat
}

.interest h2 {
    color: #fff;
    margin-bottom: 32px
}

.interest .content {
    min-height: 260px;
    padding: 30px 0;
    width: 1060px;
    text-align: left;
    color: #fff;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.interest .content>div {
    padding-right: 20px
}

.interest .content>div p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 30px;
    opacity: .6;
    max-width: 728px
}

@media screen and (max-width:768px) {
    .interest .content {
        flex-wrap: wrap;
        justify-content: center
    }

    .interest .content>div {
        text-align: center;
        padding-right: 0;
        width: 100%;
        margin-bottom: 30px
    }
}

.interest .btn-white {
    margin: 0;
    min-width: 150px;
    padding: 0 5px;
    line-height: 44px;
    background: #fff;
    border: 3px solid #fff;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 700;
    color: #fb9c33;
    transform: translateY(0);
    transition: all .3s ease-in-out
}

.interest .btn-white:after {
    display: none
}

.interest .btn-white:hover {
    transform: translateY(-4px)
}

.workbench {
    height: 100vh;
    background: #f6f7fb;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #333
}

@media screen and (max-width:768px) {
    .workbench {
        background: none
    }
}

.workbench .workbtn {
    cursor: pointer;
    min-width: 140px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 46px;
    height: 46px;
    background: #55f;
    border-radius: 5px
}

.workbench .workbtn:hover {
    background: #3f3fff
}

.workbench .remove-header {
    position: relative;
    width: 100%;
    height: 62px;
    background: #fff;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee
}

.workbench .remove-header>div {
    display: inline-block
}

.workbench .remove-header .logo {
    display: inline-block;
    vertical-align: middle;
    line-height: 0
}

.workbench .remove-header .logo img {
    width: 133px;
    height: 36px
}

.workbench .remove-header .logo img:lang(zh) {
    width: 83px
}

@media screen and (max-width:768px) {
    .workbench .remove-header {
        height: 45px;
        padding: 0 6%
    }

    .workbench .remove-header>div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .workbench .remove-header>div:nth-child(2),
    .workbench .remove-header>div:nth-child(3) {
        display: none
    }

    .workbench .remove-header .logo img {
        width: auto;
        height: 28px
    }

    .workbench .remove-header .logo img:lang(zh) {
        width: auto
    }
}

.workbench .remove-header .backhome {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    cursor: pointer;
    margin-left: 30px
}

.workbench .remove-header .controls__center {
    user-select: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.workbench .remove-header .controls__center>span {
    font-size: 16px;
    padding-left: 23px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 0;
    vertical-align: middle;
    cursor: pointer
}

.workbench .remove-header .controls__center .undo {
    margin-right: 43px;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/undo.f2888332.svg)
}

.workbench .remove-header .controls__center .undo:hover {
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/undo-active.e9cc5345.svg)
}

.workbench .remove-header .controls__center .redo {
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/redo.bb1613e1.svg)
}

.workbench .remove-header .controls__center .redo:hover {
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/redo-active.4c96a021.svg)
}

.workbench .remove-header .controls__center .undo.disabled {
    color: #ececec;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/undo-disable.e09eed72.svg)
}

.workbench .remove-header .controls__center .redo.disabled {
    color: #ececec;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/redo-disable.66279781.svg)
}

.workbench .remove-header .add-btn {
    background: #fff;
    border: 1px solid #6059f7;
    color: #55f;
    line-height: 37px;
    height: 37px;
    margin-right: 15px;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left
}

.workbench .remove-header .add-btn:before {
    content: "";
    display: inline-block;
    margin-right: 7px;
    width: 25px;
    height: 19px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/upload.0851085d.svg) 50%/25px no-repeat
}

.workbench .remove-header .add-btn:hover {
    background: #55f;
    color: #fff
}

.workbench .remove-header .add-btn:hover:before {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/upload-white.c5f5ac71.svg) 50%/25px no-repeat
}

.workbench .remove-header .download {
    line-height: 37px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center
}

.workbench .remove-header .download:before {
    content: "";
    display: inline-block;
    margin-right: 7px;
    width: 23px;
    height: 17px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/download.dd3610d7.svg) 50%/23px no-repeat
}

.workbench .remove-header .download.disabled {
    background: #e9e9e9;
    cursor: not-allowed;
    color: #fff
}

.workbench .remove-header .download.disabled:hover {
    background: #e9e9e9
}

.workbench .tool-bar {
    height: 82px;
    padding: 14px 0 23px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .workbench .tool-bar {
        display: none
    }
}

.workbench .tool-bar>div {
    min-width: 106px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    line-height: 46px;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.workbench .tool-bar .brush-size {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 53px;
    padding: 0 16px;
    min-width: 180px;
    white-space: nowrap;
    height: 71px;
    background: #fff;
    box-shadow: 4px 7px 15px 0 rgba(85, 85, 255, .06);
    border-radius: 5px
}

.workbench .tool-bar .brush-size>div {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.workbench .tool-bar .brush-size span {
    color: #333;
    font-size: 14px;
    line-height: 26px;
    margin: 11px 0 0
}

.workbench .tool-bar .brush-size span:first-child {
    float: left
}

.workbench .tool-bar .brush-size span:nth-child(2) {
    float: right;
    margin-left: 20px
}

.workbench .tool-bar .brush-size .ap-slider {
    clear: both
}

.workbench .tool-bar .brush-size .ap-slider .ap-slider__runway {
    width: 100%;
    height: 5px;
    background: rgba(85, 85, 255, .1);
    border-radius: 2px;
    margin: 8px 0;
    position: relative;
    cursor: pointer;
    vertical-align: middle
}

.workbench .tool-bar .brush-size .ap-slider .ap-slider__bar {
    height: 5px;
    background: #55f;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    position: absolute
}

.workbench .tool-bar .brush-size .ap-slider .ap-slider__button {
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
    user-select: none;
    border: 2px solid #55f
}

.workbench .tool-bar .brush {
    position: relative
}

.workbench .tool-bar .brush:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-right: 7px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/brush.fce9138c.svg) 50%/cover no-repeat
}

.workbench .tool-bar .brush.active,
.workbench .tool-bar .brush:hover {
    background: #55f;
    color: #fff
}

.workbench .tool-bar .brush.active:before,
.workbench .tool-bar .brush:hover:before {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/brush-white.54c98528.svg) 50%/cover no-repeat
}

.workbench .tool-bar .rectangle {
    margin: 0 15px
}

.workbench .tool-bar .rectangle:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 21px;
    margin-right: 9px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/rectangle.e9a5a401.svg) 50%/cover no-repeat
}

.workbench .tool-bar .rectangle.active,
.workbench .tool-bar .rectangle:hover {
    color: #fff;
    background: #55f
}

.workbench .tool-bar .rectangle.active:before,
.workbench .tool-bar .rectangle:hover:before {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/rectangle-white.ee823e8f.svg) 50%/cover no-repeat
}

.workbench .tool-bar .noose:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 25px;
    margin-right: 7px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/noose.6fb9967c.svg) 50%/cover no-repeat
}

.workbench .tool-bar .noose.active,
.workbench .tool-bar .noose:hover {
    color: #fff;
    background: #55f
}

.workbench .tool-bar .noose.active:before,
.workbench .tool-bar .noose:hover:before {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/noose-white.39e12c5f.svg) 50%/cover no-repeat
}

.workbench .tool-bar .eraser {
    display: none;
    position: relative
}

.workbench .tool-bar .eraser:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 22px;
    margin-right: 6px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/eraser.89bc2589.svg) 50%/cover no-repeat
}

.workbench .tool-bar .eraser.active,
.workbench .tool-bar .eraser:hover {
    color: #fff;
    background: #55f
}

.workbench .tool-bar .eraser.active:before,
.workbench .tool-bar .eraser:hover:before {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/eraser-white.00433b9a.svg) 50%/cover no-repeat
}

.workbench .tool-bar .line6 {
    width: 1px;
    height: 30px;
    background: #55f;
    opacity: .2;
    margin: 8px 35px;
    min-width: auto;
    padding: 0;
    border-radius: 0
}

.workbench .tool-bar .begin {
    background: #fff;
    border: 1px solid #55f;
    color: #55f;
    padding: 0 21px
}

.workbench .tool-bar .begin:hover {
    color: #fff;
    background: #55f
}

.workbench .middle {
    position: relative;
    padding: 0 35px 35px;
    flex: 1;
    width: 100%
}

@media screen and (max-width:768px) {
    .workbench .middle {
        padding: 0 6% 35px;
        background: #fff
    }
}

.workbench .middle .confirm-win {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 9;
    width: 430px;
    height: 190px;
    padding: 0 20px;
    background: #fff;
    box-shadow: 0 6px 14px 0 rgba(175, 176, 176, .46);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .workbench .middle .confirm-win {
        top: 15%;
        left: 10%;
        width: 80%
    }
}

.workbench .middle .confirm-win>p {
    margin-bottom: 30px;
    font-size: 18px;
    color: #565656
}

.workbench .middle .confirm-win>div {
    display: flex;
    justify-content: flex-end
}

.workbench .middle .confirm-win>div span {
    color: #55f;
    border: 1px solid #55f;
    cursor: pointer;
    min-width: 140px;
    padding: 0 15px;
    height: 44px;
    display: inline-block;
    margin: 0 14px;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    border-radius: 25px
}

.workbench .middle .confirm-win>div span.primary,
.workbench .middle .confirm-win>div span:hover {
    color: #fff;
    background: #55f
}

.workbench .middle .confirm-win>div span.primary:hover {
    background: #3f3fff
}

.workbench .middle .operations-btns {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 7.55%
}

@media screen and (max-width:768px) {
    .workbench .middle .operations-btns {
        display: none
    }
}

.workbench .middle .operations-btns>span.begin {
    min-width: 220px
}

.workbench .middle .operations-mobile {
    display: none
}

@media screen and (max-width:768px) {
    .workbench .middle .operations-mobile {
        display: block;
        margin-top: 30px
    }
}

.workbench .middle .operations-mobile .tool-list {
    display: flex;
    justify-content: space-between
}

.workbench .middle .operations-mobile .ap-slider {
    width: 25%
}

.workbench .middle .operations-mobile .ap-slider .ap-slider__button {
    border-color: #5455ff
}

.workbench .middle .operations-mobile .ap-slider .ap-slider__bar {
    background-color: #5455ff
}

.workbench .middle .operations-mobile .workbtn {
    line-height: 40px;
    height: 40px;
    min-width: 120px;
    flex: 1;
    margin: 0 5%
}

.workbench .middle .operations-mobile .workbtn.disabled {
    background: #e9e9e9;
    cursor: not-allowed;
    color: #fff
}

.workbench .middle .operations-mobile .step {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: space-around
}

.workbench .middle .operations-mobile .undo {
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/undo.f2888332.svg) no-repeat;
    width: 20px;
    height: 21px;
    display: inline-block
}

.workbench .middle .operations-mobile .redo {
    width: 20px;
    height: 21px;
    display: inline-block;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/redo.bb1613e1.svg) no-repeat
}

.workbench .middle .operations-mobile .undo.disabled {
    color: #aaa;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/undo-disable.1005af96.svg) no-repeat
}

.workbench .middle .operations-mobile .redo.disabled {
    color: #aaa;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/redo-disable.40275434.svg) no-repeat
}

.workbench .middle .operations-mobile .btns {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around
}

.workbench .middle .preview-wrapper {
    position: relative;
    width: 100%;
    height: 100%
}

.workbench .middle .preview-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: none
}

.workbench .middle .preview-wrapper.brush-change:before {
    display: block
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper {
        height: calc(100% - 180px);
        background: #f5f6fa;
        position: relative
    }

    .workbench .middle .preview-wrapper.brush-change:before {
        display: none
    }
}

.workbench .middle .preview-wrapper .upload-info {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .upload-info .upload-display {
        width: 100%;
        height: 100%
    }
}

.workbench .middle .preview-wrapper .upload-info .upload-display>div {
    width: 354px;
    height: 200px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/icon-image.ad67f2b6.svg) 50% no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    border: 1px solid #ddd;
    text-shadow: 0 0 8px #aaa
}

@media screen and (max-width:1280px) {
    .workbench .middle .preview-wrapper .upload-info .upload-display>div {
        height: 180px
    }
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .upload-info .upload-display>div {
        width: 100%;
        height: 166px
    }
}

.workbench .middle .preview-wrapper .upload-info p.uploading {
    font-size: 16px;
    margin: 23px 0 37px;
    text-align: center
}

@media screen and (max-width:1280px) {
    .workbench .middle .preview-wrapper .upload-info p.uploading {
        margin: 23px 0 23px
    }
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .upload-info p.uploading {
        word-break: break-word;
        line-height: 20px;
        margin: 20px 0;
        min-height: 40px
    }
}

.workbench .middle .preview-wrapper .upload-info p.uploaded {
    font-size: 20px;
    text-align: center;
    position: relative
}

.workbench .middle .preview-wrapper .upload-info p.uploaded span {
    color: #4abaff
}

.workbench .middle .preview-wrapper .process-info {
    background: rgba(0, 0, 0, .1);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .process-info {
        padding-top: 0;
        top: 0;
        height: 100%
    }
}

.workbench .middle .preview-wrapper .process-info .processing {
    min-width: 301px;
    height: 185px;
    background: #fff;
    box-shadow: 0 7px 16px 0 rgba(175, 176, 176, .46);
    border-radius: 9px;
    padding: 36px 20px
}

.workbench .middle .preview-wrapper .process-info .processing p {
    text-align: center
}

.workbench .middle .preview-wrapper .process-info .processing .p1 {
    font-size: 16px;
    color: #565656;
    line-height: 58px;
    width: 100%;
    position: relative;
    height: 58px
}

.workbench .middle .preview-wrapper .process-info .processing .p1 span {
    position: absolute;
    display: inline-block;
    width: 54px;
    height: 54px;
    top: 0;
    left: 50%;
    margin-left: -27px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/circle.aadce172.png) 50%/54px no-repeat;
    animation: circleRoate 1s linear infinite
}

@keyframes circleRoate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.workbench .middle .preview-wrapper .process-info .processing .p2 {
    font-size: 20px;
    margin-top: 20px;
    color: #565656
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .process-info .processing {
        width: 100px;
        height: 100px;
        padding: 25px;
        min-width: auto
    }

    .workbench .middle .preview-wrapper .process-info .processing .p1 {
        font-size: 0
    }

    .workbench .middle .preview-wrapper .process-info .processing .p1 span {
        width: 50px;
        height: 50px;
        margin-left: -25px;
        background-size: 50px
    }

    .workbench .middle .preview-wrapper .process-info .processing .p2 {
        display: none
    }
}

.workbench .middle .preview-wrapper .process-info .finished {
    background: #fff;
    box-shadow: 0 6px 14px 0 rgba(175, 176, 176, .46);
    border-radius: 8px;
    position: relative
}

.workbench .middle .preview-wrapper .process-info .finished.success {
    width: 116px;
    height: 116px;
    background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/success.8c78dd01.svg) 50%/60px no-repeat
}

.workbench .middle .preview-wrapper .process-info .finished.success>* {
    display: none !important
}

.workbench .middle .preview-wrapper .process-info .finished.error {
    font-size: 18px;
    line-height: 30px;
    width: 260px;
    min-height: 160px;
    padding: 37px 20px 34px
}

.workbench .middle .preview-wrapper .process-info .finished.error .close {
    width: 37px;
    height: 37px;
    margin: auto;
    background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/close.9d99c2a2.svg) 50%/37px no-repeat;
    margin-bottom: 23px
}

@media screen and (max-width:768px) {
    .workbench .middle .preview-wrapper .process-info .finished {
        width: 80%
    }

    .workbench .middle .preview-wrapper .process-info .finished.success {
        width: 100px;
        height: 100px;
        background: #fff url(https://qncdn.aoscdn.com/projects/picwish/assets/img/success.8c78dd01.svg) 50%/50px no-repeat
    }
}

.workbench .middle .preview-wrapper .preview-container {
    position: relative;
    overflow: hidden
}

.workbench .middle .preview-wrapper .preview-container,
.workbench .middle .preview-wrapper .preview-container .item-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.workbench .middle .preview-wrapper .preview-container .item-container p {
    text-align: center
}

.workbench .middle .preview-wrapper .preview-container canvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 8;
    opacity: .6
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-rect {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/cursor-rect.dc3b8cf1.png) 12 12, auto
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-tl {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/resize-2.0622c12e.png) 11 11, auto
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-bl {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/resize-1.45988aa6.png) 11 11, auto
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-tr {
    cursor: pointer
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-br {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/resize-2.0622c12e.png) 11 11, auto
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-move {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/move.8fd6a7d2.png) 12 12, move
}

.workbench .middle .preview-wrapper .preview-container canvas.cursor-noose {
    cursor: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/cursor-noose.5a23dcde.png) 6 21, auto
}

.workbench .middle .preview-wrapper .preview-container .cursorstyle {
    cursor: none
}

.workbench .middle .preview-wrapper .preview-container #upper-canvas {
    opacity: 1
}

.workbench .middle .preview-wrapper .preview-container img,
.workbench .middle .preview-wrapper .preview-container video {
    user-select: none;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto
}

.workbench .middle .scale-center {
    user-select: none;
    position: absolute;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: -16px;
    width: 176px;
    height: 58px;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 3px 10px 0 rgba(70, 70, 163, .19);
    border-radius: 5px
}

@media screen and (max-width:768px) {
    .workbench .middle .scale-center {
        display: none
    }
}

.workbench .middle .scale-center>span {
    display: inline-block;
    background-repeat: no-repeat;
    margin: 0 8px;
    cursor: pointer
}

.workbench .middle .scale-center>span:hover {
    opacity: .7
}

.workbench .middle .scale-center .zoom-size {
    margin: 0;
    width: auto;
    line-height: 21px;
    color: #fff;
    font-size: 14px;
    cursor: unset
}

.workbench .middle .scale-center .zoom-size:hover {
    opacity: 1
}

.workbench .middle .scale-center .pan {
    margin: 0 16px 0 10px;
    width: 19px;
    height: 21px;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/pan.c3e28945.svg)
}

.workbench .middle .scale-center .pan.active {
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/pan-active.5dce1af4.svg)
}

.workbench .middle .scale-center .zoom-in {
    width: 17px;
    height: 19px;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/zoom-in.1fd942c9.svg)
}

.workbench .middle .scale-center .zoom-out {
    width: 17px;
    height: 19px;
    background-image: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/zoom-out.cebdfdb3.svg)
}

.ap-tooltip__popper.is-dark {
    display: none !important
}

.modal-box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 400;
    color: #333;
    line-height: 40px;
    font-size: 20px
}

.modal-box .modal-content {
    width: 430px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 40px 0 hsla(0, 0%, 45.1%, .22);
    border-radius: 18px;
    padding: 33px 30px 40px
}

.modal-box .modal-content ::-webkit-scrollbar {
    background: #eee;
    width: 5px;
    height: 5px
}

.modal-box .modal-content ::-webkit-scrollbar-thumb {
    background: #eee
}

.modal-box .modal-content .close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    cursor: pointer
}

.modal-box .modal-content .close:after,
.modal-box .modal-content .close:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #ccc
}

.modal-box .modal-content .close:before {
    transform: rotate(45deg)
}

.modal-box .modal-content .close:after {
    transform: rotate(-45deg)
}

.modal-box p {
    margin-bottom: 18px;
    font-size: 18px;
    color: #565656;
    line-height: 34px
}

.modal-box img {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .1)
}

.modal-box .ok {
    width: 140px;
    height: 44px;
    line-height: 44px;
    background: #55f;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0 auto;
    cursor: pointer
}

.modal-box .ok:hover {
    background: #3f3fff
}

.downbox {
    width: 100%;
    height: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 45px;
    z-index: 1003;
    background: #000
}

.downbox p {
    text-align: center;
    font-size: 20px;
    padding: 15px;
    line-height: 30px;
    padding-bottom: 20px;
    padding-top: 40px;
    color: #fff
}

.downbox p:after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 20px;
    background: url(https://qncdn.aoscdn.com/projects/picwish/assets/img/arrow.747119ae.svg) 50%/auto 100% no-repeat;
    margin-left: 6px;
    vertical-align: text-bottom
}

.downbox div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
    max-height: calc(100% - 180px)
}

.downbox div img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}